/* site.css - секции контента S1-S16 (design.md), префикс ap-. Мобайл-фёрст. */

/* ===================== Sections, typography ===================== */
.ap-sec{
  background:var(--ap-card); border:1px solid var(--ap-line); border-radius:var(--ap-r-card);
  padding:20px 18px; margin:0 0 16px;
}
.ap-sec > h2, .ap-sec__h{ margin:0 0 12px; font-size:21px; line-height:1.3; letter-spacing:-.01em; }
.ap-sec h3{ margin:20px 0 8px; font-size:17px; line-height:1.35; }
.ap-sec p{ margin:0 0 12px; }
.ap-sec > :last-child{ margin-bottom:0; }
.ap-sec a:not(.ap-btn){ text-decoration:underline; text-underline-offset:2px; }
.ap-small{ font-size:14px; color:var(--ap-muted); }
.ap-prose{ max-width:72ch; }
@media (min-width:768px){
  .ap-sec{ padding:26px 28px; }
  .ap-sec > h2, .ap-sec__h{ font-size:24px; }
}

/* ===================== S1 app-head ===================== */
.ap-head{ display:grid; gap:20px; }
.ap-head__id{ display:flex; gap:16px; align-items:flex-start; }
.ap-head__icon{ width:72px; height:72px; border-radius:20px; background:var(--ap-text); padding:8px; flex:none; box-shadow:var(--ap-shadow); }
.ap-head h1{ margin:0; font-size:22px; line-height:1.22; letter-spacing:-.015em; }
.ap-head__meta{ margin:6px 0 0; display:flex; flex-wrap:wrap; align-items:center; gap:4px 10px; font-size:14px; color:var(--ap-muted); }
.ap-head__meta span:first-child{ color:var(--ap-accent); font-weight:700; }
.ap-head__meta span + span::before{
  content:""; display:inline-block; width:4px; height:4px; border-radius:50%;
  background:var(--ap-muted); margin-right:10px; vertical-align:middle;
}
.ap-chips{ list-style:none; display:flex; flex-wrap:wrap; gap:8px; }
.ap-chips li{
  font-size:13px; font-weight:700; padding:5px 10px; border-radius:var(--ap-r-btn);
  background:var(--ap-bg); border:1px solid var(--ap-line);
}
.ap-chips li.ap-chips__free{ background:#e7f7ef; border-color:#bfe9d4; color:#0a7a4d; }
.ap-head__lead{ margin:0; }
.ap-head__ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.ap-head__ctas .ap-btn{ flex:1 1 240px; }
.ap-btn__row{ white-space:nowrap; }
.ap-head__note{ margin:0; font-size:14px; color:var(--ap-muted); border-left:3px solid var(--ap-accent); padding-left:12px; }
.ap-screen{ margin:0; justify-self:center; width:min(260px, 78%); }
.ap-screen img{
  border-radius:22px; border:6px solid var(--ap-text); box-shadow:0 12px 30px rgba(27,29,41,.18);
}
@media (min-width:560px){

  .ap-head__icon{ width:96px; height:96px; border-radius:24px; padding:10px; }
  .ap-head h1{ font-size:28px; }
}
@media (min-width:768px){
  .ap-head{ grid-template-columns:minmax(0,1fr) 220px; column-gap:28px; align-items:start; }
  .ap-head__body{ display:grid; gap:16px; }
  .ap-screen{ width:100%; grid-row:1; grid-column:2; }
}
@media (min-width:1024px){ .ap-head h1{ font-size:30px; } }
.ap-head__body{ display:grid; gap:16px; }

/* ===================== S2 page-head ===================== */
.ap-phead{ display:grid; gap:16px; }
.ap-phead h1{ margin:0; font-size:24px; line-height:1.25; }
.ap-phead__ctas{ display:flex; flex-wrap:wrap; gap:10px; }
.ap-phead__fig{ margin:0; width:min(200px, 60%); }
.ap-phead__fig img{ border-radius:var(--ap-r-card); border:1px solid var(--ap-line); box-shadow:var(--ap-shadow); }
@media (min-width:768px){
  .ap-phead{ grid-template-columns:minmax(0,1fr) 180px; align-items:start; }
  .ap-phead h1{ font-size:28px; }
}

/* ===================== S3 spec-grid ===================== */
.ap-spec{ margin:4px 0 14px; display:grid; grid-template-columns:repeat(2, minmax(0,1fr)); border-top:1px solid var(--ap-line); border-left:1px solid var(--ap-line); border-radius:var(--ap-r-btn); overflow:hidden; }
.ap-spec__item{ padding:10px 12px; border-right:1px solid var(--ap-line); border-bottom:1px solid var(--ap-line); min-width:0; }
.ap-spec dt{ font-size:12.5px; color:var(--ap-muted); text-transform:uppercase; letter-spacing:.04em; }
.ap-spec dd{ margin:2px 0 0; font-weight:700; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }
@media (min-width:768px){ .ap-spec{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ===================== S4 shot-rail ===================== */
.ap-rail{
  list-style:none; display:flex; gap:14px; overflow-x:auto; scroll-snap-type:x mandatory;
  padding:4px 2px 14px; margin:8px -2px 0; -webkit-overflow-scrolling:touch;
}
.ap-rail li{ flex:none; scroll-snap-align:start; }
.ap-rail figure{ margin:0; }
.ap-rail img{
  height:340px; width:auto; max-width:none; border-radius:var(--ap-r-card);
  border:1px solid var(--ap-line); box-shadow:var(--ap-shadow); background:var(--ap-bg);
}
.ap-rail figcaption{ margin-top:8px; font-size:13.5px; color:var(--ap-muted); max-width:240px; }
@media (min-width:768px){ .ap-rail img{ height:380px; } }

/* ===================== S5 step-line ===================== */
.ap-steps{ list-style:none; counter-reset:ap-step; display:grid; gap:0; }
.ap-steps > li{ counter-increment:ap-step; position:relative; padding:0 0 22px 46px; }
.ap-steps > li::before{
  content:counter(ap-step); position:absolute; left:0; top:0; width:32px; height:32px; border-radius:50%;
  background:var(--ap-accent); color:#fff; font-weight:800; display:grid; place-items:center; font-size:15px;
}
.ap-steps > li::after{ content:""; position:absolute; left:15px; top:36px; bottom:4px; width:2px; background:var(--ap-line); }
.ap-steps > li:last-child::after{ display:none; }
.ap-steps h3{ margin:4px 0 6px; }
.ap-steps figure{ margin:10px 0 0; max-width:260px; }
.ap-steps figure img{ border-radius:var(--ap-r-card); border:1px solid var(--ap-line); box-shadow:var(--ap-shadow); }

/* ===================== S6 step-compact ===================== */
.ap-cards{ list-style:none; counter-reset:ap-c; display:grid; gap:12px; margin:4px 0 14px; }
.ap-cards > li{
  counter-increment:ap-c; position:relative; padding:44px 16px 16px; border-radius:var(--ap-r-card);
  background:var(--ap-bg); border:1px solid var(--ap-line);
}
.ap-cards > li::before{
  content:counter(ap-c); position:absolute; left:16px; top:12px; width:26px; height:26px; border-radius:7px;
  background:var(--ap-accent-soft); color:var(--ap-accent); font-weight:800; font-size:14px; display:grid; place-items:center;
}
@media (min-width:768px){ .ap-cards{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ===================== S7 prose ===================== */
/* базовая типографика .ap-sec */

/* ===================== S8 prose-aside ===================== */
.ap-pa{ display:grid; gap:16px; }
.ap-pa__box{
  margin:0; background:var(--ap-accent-soft); border-radius:var(--ap-r-card); padding:16px;
  align-self:start;
}
.ap-route{ list-style:none; counter-reset:ap-r; display:grid; gap:8px; }
.ap-route li{ counter-increment:ap-r; display:flex; align-items:center; gap:10px; font-weight:700; }
.ap-route li::before{
  content:counter(ap-r); flex:none; width:26px; height:26px; border-radius:50%; background:var(--ap-card);
  color:var(--ap-accent); border:2px solid var(--ap-accent); display:grid; place-items:center; font-size:13px;
}
@media (min-width:768px){ .ap-pa{ grid-template-columns:minmax(0,1fr) 220px; gap:24px; } }

/* ===================== S9 note ===================== */
.ap-note{ margin:0 0 12px; padding:12px 14px; border-left:4px solid var(--ap-accent); background:var(--ap-accent-soft); border-radius:0 var(--ap-r-btn) var(--ap-r-btn) 0; }
.ap-note p:last-child{ margin-bottom:0; }
.ap-note--warn{ border-left-color:var(--ap-warn); background:var(--ap-warn-bg); }
.ap-note--age{ border-left-color:var(--ap-err); background:var(--ap-err-bg); display:flex; gap:10px; align-items:center; }
.ap-note--code{ border-left-color:var(--ap-muted); background:var(--ap-code-bg); font-family:var(--ap-mono); font-size:14px; overflow-wrap:anywhere; }

/* ===================== S10 data-table ===================== */
.ap-table-wrap{ overflow-x:auto; margin:4px 0 14px; border:1px solid var(--ap-line); border-radius:var(--ap-r-btn); }
.ap-table{ width:100%; border-collapse:collapse; font-size:15px; min-width:480px; }
.ap-table caption{ text-align:left; padding:10px 12px; font-size:13px; color:var(--ap-muted); caption-side:top; }
.ap-table th, .ap-table td{ padding:10px 12px; text-align:left; vertical-align:top; border-top:1px solid var(--ap-line); }
.ap-table thead th{ background:var(--ap-bg); font-size:13px; text-transform:uppercase; letter-spacing:.04em; color:var(--ap-muted); }
.ap-table tbody tr:nth-child(even){ background:#fafbfd; }

/* ===================== S11 changelog ===================== */
.ap-log{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin:4px 0 14px; padding:14px 16px; border:1px dashed var(--ap-line); border-radius:var(--ap-r-card); background:var(--ap-bg); }
.ap-log__ver{ font-weight:800; font-size:14px; background:var(--ap-text); color:#fff; padding:4px 10px; border-radius:var(--ap-r-btn); }
.ap-log time{ font-weight:700; }
.ap-log__none{ margin:0; color:var(--ap-muted); font-size:14px; width:100%; }

/* ===================== S12 check-list ===================== */
.ap-check{ list-style:none; display:grid; gap:12px; margin:4px 0 14px; }
.ap-check li{ position:relative; padding:12px 14px 12px 46px; border:1px solid var(--ap-line); border-radius:var(--ap-r-card); }
.ap-check li::before{
  content:""; position:absolute; left:14px; top:15px; width:22px; height:22px; border-radius:50%; background:var(--ap-get);
}
.ap-check li::after{
  content:""; position:absolute; left:21.5px; top:19px; width:6px; height:11px;
  border-right:2.5px solid #fff; border-bottom:2.5px solid #fff; transform:rotate(45deg);
}
@media (min-width:768px){ .ap-check{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* ===================== S13 tile-grid ===================== */
.ap-tiles{ list-style:none; display:grid; gap:10px; margin:4px 0 14px; }
.ap-tiles li{ padding:14px; border-radius:var(--ap-r-card); background:var(--ap-bg); border:1px solid var(--ap-line); font-size:15px; }
.ap-tiles strong{ display:block; color:var(--ap-accent); font-size:16px; margin-bottom:4px; }
@media (min-width:560px){ .ap-tiles{ grid-template-columns:repeat(2, minmax(0,1fr)); } }
@media (min-width:1200px){ .ap-tiles{ grid-template-columns:repeat(3, minmax(0,1fr)); } }

/* ===================== S14 cta-panel ===================== */
.ap-cta-panel{
  display:grid; gap:12px; align-items:center; margin:0 0 16px; padding:18px;
  background:var(--ap-accent-soft); border:1px solid #e0ccff; border-radius:var(--ap-r-card);
}
.ap-cta-panel__line{ margin:0; font-weight:700; font-size:17px; }
@media (min-width:768px){ .ap-cta-panel{ grid-template-columns:minmax(0,1fr) auto; padding:20px 26px; } }

/* ===================== S15 faq ===================== */
.ap-faq{ border-top:1px solid var(--ap-line); }
.ap-faq details{ border-bottom:1px solid var(--ap-line); }
.ap-faq summary{ list-style:none; cursor:pointer; padding:14px 34px 14px 0; position:relative; }
.ap-faq summary::-webkit-details-marker{ display:none; }
.ap-faq summary h3{ margin:0; font-size:16.5px; }
.ap-faq summary::after{
  content:""; position:absolute; right:6px; top:50%; width:9px; height:9px; margin-top:-7px;
  border-right:2px solid var(--ap-accent); border-bottom:2px solid var(--ap-accent); transform:rotate(45deg); transition:transform .15s;
}
.ap-faq details[open] summary::after{ transform:rotate(-135deg); margin-top:-2px; }
.ap-faq details p{ margin:0 0 14px; color:#33364a; }

/* ===================== S16 legal ===================== */
.ap-toc{ list-style:none; display:grid; gap:4px; padding:12px 14px; margin:0 0 16px; background:var(--ap-bg); border-radius:var(--ap-r-btn); font-size:15px; }
.ap-legal h2{ margin:24px 0 8px; font-size:20px; }
.ap-legal ul{ padding-left:20px; margin:0 0 12px; }
@media (max-width:559px){
  .ap-head__meta span{ flex-basis:100%; }
  .ap-head__meta span + span::before{ display:none; }
}

/* ===== 7д: правила внутренних страниц (слиты из tmp/css-*.css) ===== */

/* S1 без кадра: одна колонка */
@media (min-width:768px){ .ap-head--solo{ grid-template-columns:minmax(0,1fr); } }

/* простой маркированный список в тексте секции */
.ap-list{ list-style:disc; padding-left:20px; margin:0 0 12px; display:grid; gap:6px; }

/* инлайн-код: хеши, команды, ?v=2 */
.ap-sec code{
  font-family:var(--ap-mono); font-size:.92em; background:var(--ap-code-bg);
  padding:1px 5px; border-radius:4px; overflow-wrap:anywhere;
}
.ap-note--code code{ background:transparent; padding:0; font-weight:700; }

/* S8: врезка стоит в разметке первой (после вводной фразы), на десктопе уходит вправо */
.ap-pa__list{ list-style:disc; padding-left:18px; display:grid; gap:10px; font-size:15px; }
@media (min-width:768px){
  .ap-pa--first .ap-pa__box{ grid-column:2; grid-row:1; }
  .ap-pa--wide{ grid-template-columns:minmax(0,1fr); }
}
/* врезка без основного текста рядом: на всю ширину */
.ap-pa--wide .ap-pa__box{ grid-column:auto; grid-row:auto; }

/* S4: первый кадр ленты широкий (шапка десктопа) */
.ap-rail__wide img{ height:auto; width:min(560px, 82vw); }

.ap-pa__fact{ margin:0; font-size:15px; }
.ap-pa__fact strong{ display:block; color:var(--ap-accent); font-size:16px; margin-bottom:4px; overflow-wrap:anywhere; }
.ap-pa__box .ap-list{ margin:0; font-weight:700; }
.ap-steps figcaption{ margin-top:6px; font-size:13px; color:var(--ap-muted); }
.ap-phead .ap-head__note{ margin:0; }
.ap-phead__ctas .ap-btn{ flex:1 1 240px; }
.ap-sec.ap-phead--solo{ grid-template-columns:minmax(0,1fr); }
.ap-phead--solo > p{ max-width:72ch; }

/* S2 page-head без кадра: одна колонка, ровные отступы */
.ap-phead__body{ display:grid; gap:14px; min-width:0; }
.ap-phead__body > p{ margin:0; }
.ap-phead__ctas .ap-btn{ flex:1 1 240px; }
@media (min-width:768px){
  .ap-phead.ap-phead--solo{ grid-template-columns:minmax(0,1fr); }
}

/* S8 врезка-факт: список ключ/значение */
.ap-facts{ display:grid; gap:12px; margin:0; }
.ap-facts dt{ font-size:12.5px; color:var(--ap-muted); text-transform:uppercase; letter-spacing:.04em; }
.ap-facts dd{ margin:2px 0 0; font-weight:700; font-size:15px; line-height:1.35; overflow-wrap:anywhere; }

/* S9 warn: список внутри врезки */
.ap-note ul{ margin:0 0 12px; padding-left:20px; display:grid; gap:4px; }

/* th scope=row в теле таблицы S10 */
.ap-table tbody th{ font-weight:700; }
.ap-phead.ap-phead--text{ grid-template-columns:minmax(0,1fr); }
.ap-phead--text p{ margin:0; }
.ap-legal--head h1{ margin:0 0 12px; font-size:24px; line-height:1.22; letter-spacing:-.015em; }
.ap-legal--head .ap-toc{ margin:16px 0 0; }
.ap-legal > h2:first-child{ margin-top:0; }
@media (min-width:900px){
  .ap-legal--head h1{ font-size:30px; }
}
/* S2 page-head без кадра: одна колонка на десктопе */
.ap-phead.ap-phead--text{ grid-template-columns:minmax(0,1fr); }
.ap-phead--text p{ max-width:72ch; margin:0; }
/* S9 note 18+: значок сверху, не по центру */
.ap-note--age{ align-items:flex-start; }
.ap-note--age .ap-sec__h{ margin-top:0; font-size:20px; }
.ap-note--warn .ap-sec__h{ margin-top:0; font-size:20px; }
.ap-note ul{ padding-left:20px; margin:0 0 12px; }
/* S16: убрать верхний отступ h2 первого в карточке */
.ap-sec.ap-legal > h2.ap-sec__h{ margin-top:0; }

/* общая рамка кадра: figure с подписью */
.ap-fig, .ap-strip, .ap-pair figure, .ap-rail--wide figure{ margin:0; }
.ap-fig img, .ap-strip img, .ap-pair img, .ap-rail--wide img{
  display:block; width:100%; height:auto; border-radius:var(--ap-r-card);
  border:1px solid var(--ap-line); box-shadow:var(--ap-shadow); background:var(--ap-bg);
}
.ap-fig figcaption, .ap-strip figcaption, .ap-pair figcaption{ margin-top:8px; font-size:13.5px; color:var(--ap-muted); }

/* широкая лента: кадры десктопных лобби и кассы, ширина по колонке, а не по высоте */
.ap-rail--wide li{ width:min(82vw, 440px); }
.ap-rail--wide img{ height:auto; width:100%; max-width:none; }
.ap-rail--wide figcaption{ max-width:none; }
@media (min-width:768px){
  .ap-rail--wide li{ width:420px; }
  .ap-rail--wide img{ height:auto; }
}

/* S8 с широким кадром: узкая колонка кадра справа (desktop), под текстом (mobile) */
@media (min-width:768px){
  .ap-pa--shot{ grid-template-columns:minmax(0,1fr) 300px; align-items:start; }
}

/* кадры парой (cricket + sportsbook): столбиком на mobile, рядом от 560 */
.ap-pair{ display:grid; gap:14px; margin:4px 0 14px; }
@media (min-width:560px){ .ap-pair{ grid-template-columns:repeat(2, minmax(0,1fr)); } }

/* кадр-полоска (ряд вкладок) над таблицей */
.ap-strip{ margin:4px 0 14px; max-width:620px; }

/* врезка-факт с короткими парами "название - значение" */
.ap-facts{ list-style:none; display:grid; gap:8px; margin:0; }
.ap-facts li{ display:flex; justify-content:space-between; gap:12px; padding:8px 0; border-bottom:1px solid #e0ccff; }
.ap-facts li:last-child{ border-bottom:0; }
.ap-facts strong{ color:var(--ap-accent); }

/* S2 page-head без кадра: одна колонка (базовое .ap-phead на 768+ резервирует колонку под кадр) */
@media (min-width:768px){
  .ap-phead--solo{ grid-template-columns:minmax(0,1fr); }
}
.ap-phead--solo > p{ max-width:72ch; }

/* ===== 9б: кадры сеткой ===== */
/* пара кадров (широкий + высокий): столбиком на mobile, рядом от 768, без обрезки */
.ap-shots{ list-style:none; display:grid; gap:16px; margin:8px 0 14px; padding:0; }
.ap-shots figure{ margin:0; }
.ap-shots img{
  display:block; width:auto; max-width:100%; height:auto; border-radius:var(--ap-r-card);
  border:1px solid var(--ap-line); box-shadow:var(--ap-shadow); background:#fff;
}
.ap-shots figcaption{ margin-top:8px; font-size:13.5px; color:var(--ap-muted); }
.ap-shots--pair img{ max-height:420px; }
@media (min-width:768px){
  .ap-shots--pair{ grid-template-columns:minmax(0,3fr) minmax(0,2fr); align-items:start; gap:20px; }
}
/* сетка 2x2 одинаковых по высоте кадров (1 колонка на mobile): кадр целиком, поля белые */
.ap-shots--grid img{ width:100%; aspect-ratio:3 / 1; object-fit:contain; }
@media (min-width:560px){
  .ap-shots--grid{ grid-template-columns:repeat(2, minmax(0,1fr)); }
}

/* ===== 9б: таблицы S10 карточками до 640 ===== */
@media (max-width:639.98px){
  .ap-table-wrap{ overflow:visible; border:0; border-radius:0; }
  .ap-table{ min-width:0; font-size:15px; }
  .ap-table, .ap-table tbody, .ap-table tr, .ap-table th, .ap-table td{ display:block; }
  .ap-table caption{ display:block; padding:0 0 8px; }
  .ap-table thead{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }
  .ap-table tbody tr, .ap-table tbody tr:nth-child(even){
    background:var(--ap-card); border:1px solid var(--ap-line); border-radius:var(--ap-r-btn); margin:0 0 10px; overflow:hidden;
  }
  .ap-table tbody th{ border-top:0; background:var(--ap-bg); font-size:16px; }
  .ap-table td{ border-top:1px solid var(--ap-line); }
  .ap-table td::before{
    content:attr(data-label); display:block; margin-bottom:2px; font-size:12px; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; color:var(--ap-muted);
  }
}