/* СфераДТП 2026 — дополнения к дизайну прототипа: меню услуг, новости, страницы, формы */

/* меню: выпадающий список услуг */
header.top nav{align-items:center}
.nav-drop{position:relative; display:inline-flex}
.nav-sub{display:none; position:absolute; top:100%; left:-14px; z-index:50; min-width:230px; padding:8px; margin-top:8px;
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm); box-shadow:var(--shadow-lift)}
.nav-sub::before{content:''; position:absolute; left:0; right:0; top:-10px; height:10px}
.nav-drop:hover .nav-sub, .nav-drop:focus-within .nav-sub{display:grid}
.nav-sub a{padding:9px 10px; border-radius:8px; color:var(--ink)!important; white-space:nowrap}
.nav-sub a:hover{background:var(--grey)}
@media(min-width:900px) and (max-width:1120px){ header.top nav{gap:13px!important; font-size:13.5px} }
.mmenu .mm-group{display:block; padding:12px 16px 4px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.mmenu a.mm-sub{padding-left:28px}

/* крошки на новостях и обычных страницах (на инструкциях их роль играет лента разделов) */
.crumbs.crumbs-on{display:flex!important; flex-wrap:wrap; gap:6px; align-items:center; font-size:13.5px; color:var(--ink-soft); margin:18px 0 4px}
.crumbs.crumbs-on a{color:var(--ink-soft); text-decoration:none}
.crumbs.crumbs-on a:hover{color:var(--red)}
.crumbs.crumbs-on i{font-style:normal; opacity:.5}

/* текст статьи: всё, что встречается в новостях и старых страницах */
.doc-body h2{font-size:23px; line-height:1.25; margin:30px 0 12px}
.doc-body h3{margin:24px 0 10px}
.doc-body h4{font-size:17px; margin:20px 0 8px}
.doc-body ol{margin:0 0 16px; padding-left:22px}
.doc-body img{height:auto; border-radius:var(--r-sm)}
.doc-body figure{margin:18px 0}
.doc-body figcaption{font-size:13px; color:var(--ink-soft); margin-top:6px}
.doc-body blockquote{margin:18px 0; padding:12px 16px; border-left:3px solid var(--red); background:var(--grey); border-radius:0 var(--r-sm) var(--r-sm) 0}
.doc-body table{width:100%; border-collapse:collapse; font-size:15px; margin:0 0 18px; display:block; overflow-x:auto}
.doc-body table th, .doc-body table td{border:1px solid var(--line); padding:9px 10px; text-align:left; vertical-align:top}
.doc-body table th{background:var(--grey); font-weight:700}
.doc-body strong, .doc-body b{font-weight:700}
.doc-body a:not(.btn):not(.tile):not(.pairbox-btn):not(.cnav-item):not(.stg){color:var(--red); text-underline-offset:3px}
.doc-body iframe{max-width:100%; border:0; border-radius:var(--r-sm)}
.doc-body .sources{margin:24px 0; padding:14px 16px; background:var(--grey); border-radius:var(--r-sm); font-size:14.5px}
.doc-body .sources ul, .doc-body .sources ol{margin:6px 0 0}
.doc-body .cta-box{margin:24px 0; padding:16px 18px; background:#FBF1F0; border-left:4px solid var(--red); border-radius:0 var(--r-sm) var(--r-sm) 0}
.doc-body .cta-box p{margin:0 0 6px}
.doc-body .cta-box p:last-child{margin:0}
.doc-body .read-also{margin:20px 0; padding:12px 16px; border:1px solid var(--line); border-radius:var(--r-sm); font-size:15px}
.doc-body .cta-link a{display:inline-flex; align-items:center; justify-content:center; padding:13px 20px; border-radius:var(--r-sm);
  background:var(--red); color:#fff; font-weight:700; text-decoration:none}
.doc-body .cta-link a:hover{background:var(--red-dark)}

/* новость */
.news-meta{margin:10px 0 0; font-size:14px; color:var(--ink-soft)}
.news-meta a{color:var(--ink-soft)}
.news-cover{margin:18px 0 22px}
.news-cover img{width:100%; height:auto; border-radius:var(--r-md); aspect-ratio:16/9; object-fit:cover}
.news-page .doc-body{margin-top:8px}
.news-call{margin:28px 0}
.news-call .callout-txt span{display:block; font-size:14.5px; font-weight:500}
.news-related{margin-top:34px}
.news-related h2{font-size:22px; margin-bottom:14px}
.news-all{margin:14px 0 0}
.news-all a{color:var(--red); font-weight:600}

/* лента новостей и рубрики */
.news-list .doc-h1{margin-top:6px}
.news-lead{color:var(--ink-soft); max-width:720px; margin:10px 0 18px}
.news-cats{display:flex; flex-wrap:wrap; gap:8px; margin:0 0 22px}
.news-cats a{padding:7px 13px; border:1px solid var(--line); border-radius:999px; font-size:14px; text-decoration:none; color:var(--ink)}
.news-cats a:hover{border-color:var(--red); color:var(--red)}
.news-grid{display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(260px,1fr))}
.news-card{display:flex; flex-direction:column; background:#fff; border:1px solid var(--line); border-radius:var(--r-md); overflow:hidden;
  text-decoration:none; color:inherit; transition:transform .15s, box-shadow .15s, border-color .15s}
.news-card:hover{transform:translateY(-2px); border-color:#E0D2D0; box-shadow:0 16px 30px -22px rgba(31,26,24,.8)}
.nc-pic img{width:100%; height:auto; aspect-ratio:16/9; object-fit:cover}
.nc-body{display:flex; flex-direction:column; gap:6px; padding:14px 16px 16px}
.nc-meta{font-size:12.5px; color:var(--ink-soft)}
.nc-title{font-size:16.5px; line-height:1.3; letter-spacing:-.01em}
.nc-ex{font-size:14px; color:var(--ink-soft); line-height:1.45}
.pager{display:flex; flex-wrap:wrap; gap:8px; margin:26px 0 6px}
.pager a, .pager span{min-width:42px; padding:9px 13px; border:1px solid var(--line); border-radius:10px; text-align:center; text-decoration:none; font-weight:600; color:var(--ink)}
.pager .current{background:var(--red); border-color:var(--red); color:#fff}
.pager a:hover{border-color:var(--red)}

/* обычная страница (политика и т.п.) */
.page-plain .doc-body{margin-top:14px}
.page-404 .tiles{margin-top:18px}

/* форма вопроса юристу внутри статей */
.ask-box{margin:30px 0 8px; padding:20px; background:var(--grey); border-radius:var(--r-md)}
.ask-title{font-size:20px; margin:0 0 6px}
.ask-sub{margin:0 0 14px; color:var(--ink-soft); font-size:15px}

/* поля Contact Form 7 в фирменном виде */
.wpcf7 form p{margin:0 0 12px}
.wpcf7 label{display:block; font-size:14px; font-weight:600}
.wpcf7 input[type=text], .wpcf7 input[type=tel], .wpcf7 input[type=email], .wpcf7 textarea{
  width:100%; margin-top:5px; padding:12px 14px; font:inherit; font-size:16px; color:var(--ink);
  background:#fff; border:1px solid var(--line); border-radius:var(--r-sm)}
.wpcf7 textarea{min-height:110px; height:130px; resize:vertical}
.wpcf7 input:focus, .wpcf7 textarea:focus{outline:2px solid rgba(143,40,34,.35); border-color:var(--red)}
.wpcf7 input[type=submit]{width:100%; padding:15px 20px; border:0; border-radius:var(--r-sm); background:var(--red); color:#fff;
  font:700 16.5px/1.2 Montserrat,sans-serif; cursor:pointer}
.wpcf7 input[type=submit]:hover{background:var(--red-dark)}
.wpcf7 .wpcf7-list-item{margin:0}
.wpcf7 .wpcf7-acceptance label{font-weight:400; font-size:13px; color:var(--ink-soft); display:flex; gap:8px; align-items:flex-start}
.wpcf7 .wpcf7-spinner{display:none}
.wpcf7 .wpcf7-response-output{margin:10px 0 0!important; padding:10px 12px!important; border-radius:10px; font-size:14px}

/* окно с формой */
.fmodal{position:fixed; inset:0; z-index:9990; display:flex; align-items:center; justify-content:center; padding:16px;
  background:rgba(20,22,26,.6)}
.fmodal[hidden]{display:none!important}
.fm-card{position:relative; width:100%; max-width:460px; max-height:calc(100vh - 32px); overflow:auto; background:#fff;
  border-radius:var(--r-md); padding:24px 20px 20px; box-shadow:0 24px 80px rgba(0,0,0,.4)}
.fm-x{position:absolute; top:8px; right:8px; width:40px; height:40px; border:0; border-radius:10px; background:transparent; font-size:18px; cursor:pointer; color:var(--ink-soft)}
.fm-x:hover{background:var(--grey)}
.fm-title{display:block; font-size:21px; line-height:1.25; padding-right:36px}
.fm-sub{margin:8px 0 16px; color:var(--ink-soft); font-size:15px}
.fm-sub a{color:var(--red); font-weight:600; white-space:nowrap}
body.fm-open{overflow:hidden}

/* плашка cookie из mu-плагина — в фирменных цветах и над нижней панелью телефона */
#sfera-cookie{background:var(--ink)!important; font-family:inherit!important; border-radius:var(--r-sm)!important}
#sfera-cookie a{color:#fff!important}
#sfera-cookie .sc-btn{background:var(--red)!important}
@media(max-width:899px){ #sfera-cookie{bottom:calc(var(--bar-h) + 10px)!important} }

/* подвал: ссылка на политику */
footer.site .fbottom a{color:inherit}
@media(prefers-reduced-motion:reduce){ .news-card{transition:none} }

/* страницы услуг и «О нас» */
.svc-page .doc-h1{margin-top:6px}
.svc-lead{font-size:17px; color:var(--ink-soft); margin:12px 0 18px; max-width:680px}
.svc-cta{display:flex; flex-wrap:wrap; align-items:center; gap:10px 16px; margin:0 0 18px}
.svc-cta .btn-red{gap:10px}
.svc-tel{font-weight:800; font-size:20px; color:var(--ink); text-decoration:none; white-space:nowrap}
.svc-form{font-size:15px}
.svc-facts{margin:0 0 8px}
@media(max-width:700px){
  .svc-cta{flex-direction:column; align-items:stretch; text-align:center}
  .svc-cta .btn{justify-content:center; width:100%}
}
.svc-note{font-size:14.5px; color:var(--ink-soft)}
.svc-page .price-table{margin:0 0 10px}
.svc-faq details{border:1px solid var(--line); border-radius:var(--r-sm); margin:0 0 10px; background:#fff}
.svc-faq summary{cursor:pointer; padding:14px 16px; font-weight:700; list-style:none}
.svc-faq summary::-webkit-details-marker{display:none}
.svc-faq summary::after{content:'+'; float:right; color:var(--red); font-weight:800}
.svc-faq details[open] summary::after{content:'–'}
.svc-faq .ans{padding:0 16px 14px; color:var(--ink-soft)}
.svc-tiles{margin:6px 0 10px}
.svc-tiles .tile{text-decoration:none}
.svc-quotes{display:grid; gap:12px; margin:0 0 18px}
.svc-quotes blockquote{margin:0}
.svc-quotes blockquote p{margin:0 0 6px}
.svc-quotes cite{font-style:normal; font-weight:700; font-size:14px}
.svc-reviews{margin:0 0 10px}
.svc-contacts{margin:0 0 12px}
.svc-contacts .contact p{margin:4px 0}
.svc-page > .wrap > .callout{margin:28px 0 6px}
/* длинные надписи в плашке-призыве переносятся, а не уходят под кнопку */
.svc-page .callout-txt b, .news-call .callout-txt b{white-space:normal}
.svc-page .callout{flex-wrap:wrap}

/* ТЕЛЕФОН: главные кнопки — во всю ширину, зоны нажатия не меньше 44 px */
@media(max-width:700px){
  main .btn-red:not(.gbtn), main .btn-line.svc-form, .midcall .btn, .sample-copy{width:100%; justify-content:center; text-align:center}
  .midcall{flex-direction:column; align-items:stretch}
  .midcall .btn{white-space:normal}
  .sample-copy{margin-left:0; margin-top:10px}
  .gbtn{min-height:44px}
  .ov-inner .btn{width:100%}
}

/* ИГРА на весь экран: любой телефон, планшет, альбомная ориентация */
.game.is-fs{height:100vh; height:100dvh; overflow:hidden; padding:10px 12px calc(10px + env(safe-area-inset-bottom)); display:flex; flex-direction:column; align-items:stretch}
.game.is-fs .game-head{flex-wrap:nowrap; align-items:center}
.game.is-fs .game-head h1{font-size:16px; line-height:1.2}
.game.is-fs .game-hud{margin:8px 0; gap:12px}
.game.is-fs .canvas-wrap{max-width:none; margin:0 auto; flex:none}
.game.is-fs .gbtn{padding:9px 14px}
@media (orientation:landscape) and (max-height:600px){
  .game.is-fs{display:grid; grid-template-columns:minmax(150px, 210px) 1fr; grid-template-rows:auto 1fr; column-gap:16px; align-items:start}
  .game.is-fs .game-head{grid-column:1; grid-row:1; flex-direction:column; align-items:stretch; gap:8px}
  .game.is-fs .garage-btn-wrap{margin-left:0; flex-direction:column}
  .game.is-fs .game-hud{grid-column:1; grid-row:2; flex-direction:column; gap:6px; margin:10px 0 0}
  .game.is-fs .canvas-wrap{grid-column:2; grid-row:1 / span 2; justify-self:center; align-self:center}
}
.game.is-fs .garage-btn-wrap{flex-wrap:nowrap}
@media (orientation:portrait){ .game.is-fs .game-head h1{font-size:15px} .game.is-fs .game-head{gap:10px} }

/* главная: свежие новости */
.home-news .news-grid{grid-template-columns:repeat(auto-fill,minmax(250px,1fr))}
.home-news-all{text-align:center; margin:20px 0 0}
@media(max-width:700px){ .home-news-all .btn{width:100%; justify-content:center} }
@media(max-width:700px){
  .home-news .news-card{flex-direction:row; align-items:stretch}
  .home-news .news-card{min-height:104px}
  .home-news .nc-pic{display:block; flex:0 0 108px; width:108px; position:relative; overflow:hidden}
  .home-news .nc-pic img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover}
  .home-news .nc-body{padding:10px 12px}
  .home-news .nc-ex{display:none}
  .home-news .nc-title{font-size:15px}
}

/* ================= ПОЛИРОВКА ПО РАЗБОРУ ДИЗАЙНЕРА (24.09) ================= */
/* логотип не подчёркнут */
header.top .logo, footer.site .fname{text-decoration:none}
/* плитки фактов: слова не рвутся посередине («ЕВРОПРОТОКОЛ») */
.anchor-facts span{overflow-wrap:normal; word-break:normal; hyphens:none}
@media(max-width:430px){ .anchor-facts span{font-size:10px; letter-spacing:0} .anchor-facts b{font-size:14px} }
/* таблицы на компьютере: четвёртая колонка больше не обрезается */
@media(min-width:701px){
  table.tbl{table-layout:auto}
  table.tbl thead th:first-child, table.tbl thead th:nth-child(2), table.tbl thead th:nth-child(3){width:auto}
  .tbl-wrap{overflow-x:auto}
}
/* единая форма кнопок: радиус 12 px; «Открыть инструкции» — во всю ширину карточки */
.big .cap em{border-radius:var(--r-sm); box-shadow:none}
@media(max-width:700px){ .big .cap em{display:flex; justify-content:center; width:100%} }
.btn-red{box-shadow:0 6px 14px -10px rgba(143,40,34,.6)}
.game-cta .btn{margin-left:0}
@media(max-width:700px){ .game-cta .btn{width:100%; justify-content:center} }
/* ссылки в тексте: ровный межстрочный интервал, зона нажатия без сдвига строки */
.doc-body p a:not(.btn):not(.tile), .doc-body li a:not(.btn):not(.tile){display:inline; min-height:0; padding:6px 0; margin:-6px 0}
/* длинные тексты на телефоне компактнее */
.doc-body p{margin:0 0 12px}
.doc-body li{margin:4px 0}
@media(max-width:700px){ .doc-body{line-height:1.6} }
/* плашка «Как на самом деле / Закон» — в фирменной палитре (графит на сером) */
.flag-zakon{background:var(--grey); border:1px solid var(--line)}
.flag-zakon .flag-ic{background:#E3E5EB}
.flag-zakon .flag-ic svg{fill:var(--ink)}
.flag-zakon b{color:var(--ink)}
/* соседние случаи внизу инструкции */
.cnav-item span{text-transform:none; letter-spacing:0; font-size:12.5px}
@media(max-width:400px){ .casenav{grid-template-columns:1fr} .cnav-next{text-align:left} }
/* отзывы: компактной полосой на телефоне */
@media(max-width:759px){
  .reviews{grid-template-columns:repeat(3,1fr); gap:8px}
  .rev{padding:12px 6px}
  .rev .n{font-size:24px}
  .rev .stars{font-size:11px; letter-spacing:1px}
  .rev .src{font-size:11.5px; line-height:1.3}
  .rev a{font-size:12.5px; min-height:0; padding:6px 0}
}
/* подвал на телефоне вдвое короче: разделы и услуги рядом */
@media(max-width:759px){
  footer.site .cols{grid-template-columns:1fr 1fr; gap:16px 18px}
  footer.site .fbrand, footer.site .fcol:last-child{grid-column:1 / -1}
  footer.site .fbrand p{margin-top:6px}
  footer.site .fcol a{padding:3px 0}
}
/* чекбокс согласия — крупный, фирменного цвета */
.wpcf7 input[type=checkbox]{width:20px; height:20px; accent-color:var(--red); margin:1px 0 0; flex:none}
.wpcf7 .wpcf7-acceptance label{font-size:13.5px}
/* блок «Как нас найти» вместо серой заглушки карты */
.map-card{display:grid; gap:14px; background:var(--ink); color:#fff; border-radius:var(--r-md); padding:18px; margin-top:14px; position:relative; overflow:hidden}
.map-card::before{content:''; position:absolute; inset:0; opacity:.14; background:
  linear-gradient(90deg, transparent 47%, #fff 47%, #fff 49%, transparent 49%) 0 0/96px 96px,
  linear-gradient(0deg, transparent 47%, #fff 47%, #fff 49%, transparent 49%) 0 0/96px 96px,
  linear-gradient(35deg, transparent 49%, #fff 49%, #fff 51.5%, transparent 51.5%) 0 0/100% 100%}
.map-card > *{position:relative}
.map-card .mc-pin{display:flex; gap:12px; align-items:flex-start}
.map-card .mc-pin i{flex:none; width:40px; height:40px; border-radius:50% 50% 50% 0; transform:rotate(-45deg); background:var(--red); display:grid; place-items:center; margin-top:2px}
.map-card .mc-pin i::after{content:''; width:13px; height:13px; border-radius:50%; background:#fff}
.map-card b{display:block; font-size:17px}
.map-card small{display:block; color:rgba(255,255,255,.75); font-size:13.5px; margin-top:3px}
.map-card .mc-go{display:grid; grid-template-columns:repeat(3,1fr); gap:8px}
.map-card .mc-go a{display:flex; align-items:center; justify-content:center; min-height:44px; border-radius:var(--r-sm); background:#fff; color:var(--ink); font-weight:700; font-size:14px; text-decoration:none; text-align:center; padding:6px}
.map-card .mc-show{background:none; border:0; color:#fff; text-decoration:underline; font:inherit; font-size:14px; cursor:pointer; justify-self:start; padding:4px 0}
.map-holder.map-open{padding:0; min-height:0; background:none; margin-top:12px}
/* главная: «Почему нам доверяют» по центру, как остальные заголовки */
.trust .h2wrap, .trust h2{text-align:center}
/* навигация по этапам длинной инструкции */
.stages{display:flex; gap:8px; overflow-x:auto; padding:2px 0 10px; margin:4px 0 14px; scrollbar-width:none}
.stages::-webkit-scrollbar{display:none}
.stages a{flex:none; padding:8px 13px; border-radius:999px; background:var(--grey); color:var(--ink); font-size:13.5px; font-weight:700; text-decoration:none; white-space:nowrap}
.stages a:hover{background:#E7E9EF}
.stages-t{font-size:12.5px; color:var(--ink-soft); margin:10px 0 2px}
h3.stage{scroll-margin-top:calc(var(--hh, 0px) + 70px)}
/* страницы услуг: вместо третьей кнопки — ссылка */
.svc-alt{margin:2px 0 16px; font-size:15px}
.svc-alt a{color:var(--red); font-weight:600}
.svc-tiles .tile .tile-go{margin-top:8px}
/* лента новостей на телефоне: компактные карточки, на компьютере — 3 колонки и обрезка текста */
@media(max-width:480px){
  .news-list .news-card{flex-direction:row; min-height:104px}
  .news-list .nc-pic{display:block; flex:0 0 108px; width:108px; position:relative; overflow:hidden}
  .news-list .nc-pic img{position:absolute; inset:0; width:100%; height:100%; aspect-ratio:auto; object-fit:cover}
  .news-list .nc-body{padding:10px 12px}
  .news-list .nc-ex{display:none}
  .news-list .nc-title{font-size:15px}
}
@media(min-width:1000px){ .news-list .news-grid{grid-template-columns:repeat(3,1fr)} }
.nc-ex{display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.nc-noimg{display:block; aspect-ratio:16/9; background:linear-gradient(135deg, var(--ink), #3a2a28)}
.nc-noimg::after{content:'СфераДТП'; display:grid; place-items:center; height:100%; color:rgba(255,255,255,.55); font-weight:800; font-size:18px}
@media(max-width:480px){ .news-list .nc-noimg, .home-news .nc-noimg{aspect-ratio:auto; height:100%; min-height:104px} .nc-noimg::after{font-size:12px} }
.stages a.stg{color:var(--ink); text-decoration:none}
/* разделы: на телефоне текст баннера читается на любом фото */
@media(max-width:700px){ .hub-banner::after{background:linear-gradient(180deg, rgba(30,38,43,.86) 0%, rgba(30,38,43,.66) 100%)} }
/* номера правил видны, но не спорят с текстом */
.rule-n{color:rgba(30,38,43,.13)}
/* подпись переключателя «При / После ДТП» читается */
.bb-phase .ph span{color:rgba(30,38,43,.6)}
.bb-phase .ph.is-on span{color:rgba(255,255,255,.85)}
/* прямой ответ на странице услуги, «что входит в цену», блок юриста в разделе «После ДТП» */
.svc-answer{background:var(--grey); border-radius:var(--r-md); padding:14px 16px; margin:0 0 6px}
.price-note{margin:12px 0 0; font-size:14px; color:var(--ink-soft); text-align:center}
.lawyer-block{display:grid; gap:8px; background:#EFF3FC; border:1px solid #D6E2FA; border-radius:var(--r-md); padding:16px 18px; margin:0 0 22px}
.lawyer-block > b{font-size:18px; color:#2B4E9B}
.lawyer-block p{margin:0; color:var(--ink)}
.lawyer-block .btn{justify-self:start; background:#2B4E9B; box-shadow:none}
.lawyer-block .btn:hover{background:#223f80}
@media(max-width:700px){ .lawyer-block .btn{justify-self:stretch; justify-content:center} }
@media(max-width:700px){
  .sample-head, .sample-sub{flex-wrap:wrap}
  .sample-head .sample-copy, .sample-sub .sample-copy{flex:1 1 100%; width:100%; margin-left:0}
  .map-card .mc-show{min-height:44px}
}
/* карточки случаев: иллюстрация сверху во всю ширину карточки вместо розового квадратика */
.tile.tile-has-pic{padding-top:0; overflow:hidden}
.tile-pic{display:block; margin:0 -16px 12px; aspect-ratio:16/7; background:#F2F3F7; overflow:hidden}
.tile-pic img{width:100%; height:100%; object-fit:cover; display:block}
.tile.tile-has-pic:hover .tile-pic img{transform:scale(1.03); transition:transform .25s}
@media(prefers-reduced-motion:reduce){ .tile.tile-has-pic:hover .tile-pic img{transform:none} }
/* оставшийся значок (ссылка на отдельный разбор) — спокойный серый, без розового */
.tile-ic{background:var(--grey); width:48px; height:48px; border-radius:12px}
.tile-ic svg{fill:var(--ink); width:26px; height:26px}
/* значки «порядка действий» — без розовой подложки, в цвет раздела */
.rule-ic{background:transparent; width:34px; height:42px; border-radius:0; place-items:start center}
.rule-ic svg{width:24px; height:24px}
body[data-page="hub-af"] .rule-ic svg{fill:#2B4E9B}
.lawyer-block{margin-top:4px}

/* ============ ПО ФИНАЛЬНОЙ ПРОВЕРКЕ (24.09, ночь) ============ */
/* таблицы на компьютере и планшете: заголовки переносятся, 4-я колонка видна целиком */
@media(min-width:701px){
  table.tbl thead th{white-space:normal}
  table.tbl{display:table; overflow:hidden}
  .tbl-wrap{overflow-x:visible}
}
/* плитки фактов на узком телефоне: без капса, «европротокол» помещается */
@media(max-width:430px){ .anchor-facts span{text-transform:none; font-size:11.5px; letter-spacing:0} }
/* игра на весь экран: гараж и итог не обрезаются, строка счёта в одну линию */
.game.is-fs .overlay{overflow-y:auto; place-items:start center; align-content:center}
.game.is-fs .game-hud{flex-wrap:nowrap; gap:10px; font-size:12px; white-space:nowrap}
.game.is-fs .game-hud b{font-size:15px}
.gfs-call{display:none}
.game.is-fs .gfs-call{display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:0 14px; border-radius:var(--r-sm);
  background:var(--red); color:#fff; font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap}
/* плашка cookie на телефоне компактнее, кнопка удобная */
@media(max-width:600px){
  #sfera-cookie{font-size:12.5px!important; padding:10px 12px!important; line-height:1.4!important}
  #sfera-cookie .sc-btn{min-height:40px; margin-top:8px!important}
}
/* зоны нажатия на телефоне */
@media(max-width:700px){
  footer.site .fcol a{padding:7px 0}
  .stages a{padding:11px 14px}
  .svc-alt a{display:inline-block; padding:12px 0}
}
/* после открытия карты ссылки на карты уже есть в карточке — второй раз не показываем */
.map-holder.map-open .map-links{display:none}
.game.is-fs .overlay{align-content:safe center}
@media (orientation:portrait){
  .game.is-fs .game-head h1{display:none}
  .game.is-fs .game-head{flex-wrap:nowrap}
  .game.is-fs .garage-btn-wrap{margin-left:0; width:100%; flex-wrap:nowrap}
  .game.is-fs .garage-btn-wrap > *{flex:1 1 0; min-width:0; padding-left:8px; padding-right:8px}
}
@media (orientation:portrait){ .game.is-fs .game-head > div:first-child{display:none} }

/* 28.09: карточки «Сколько машин» — рисунки вместо фото, раскладка как у «Особых случаев» (полоса 16:7) */
.big .pic.pic-art,.two-big.three .pic.pic-art{height:auto; aspect-ratio:16/7; background:#F2F3F7; overflow:hidden}
.big .pic-art img{width:100%; height:100%; object-fit:cover; display:block}
.big:hover .pic-art img{transform:scale(1.03); transition:transform .25s}
@media(prefers-reduced-motion:reduce){ .big:hover .pic-art img{transform:none} }

/* 28.09 (Яков): меню на телефоне — выдвижная панель справа, за ней затемнённый сайт; всё помещается на iPhone 15 Pro без прокрутки */
.mmenu{position:fixed; inset:0; z-index:9000; height:100vh; height:100dvh; max-height:none; overflow:hidden; padding:0; border:0; box-shadow:none;
  background:rgba(20,24,28,0); transition:background-color .22s ease, -webkit-backdrop-filter .22s ease, backdrop-filter .22s ease}
.mmenu[hidden]{display:none}
.mmenu{cursor:pointer; -webkit-tap-highlight-color:transparent}
.mm-panel{cursor:auto}
.mmenu.is-open{background:rgba(20,24,28,.42); -webkit-backdrop-filter:blur(2px); backdrop-filter:blur(2px)}
.mm-panel{position:absolute; top:0; right:0; bottom:0; width:84%; max-width:360px; background:#fff; overflow-y:auto; -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain; padding:0 16px calc(18px + env(safe-area-inset-bottom)); box-shadow:-14px 0 34px rgba(20,24,28,.22);
  transform:translateX(100%); transition:transform .22s cubic-bezier(.2,.8,.2,1); will-change:transform}
.mmenu.is-open .mm-panel{transform:none}
@media(prefers-reduced-motion:reduce){ .mmenu, .mm-panel{transition:none} }
.mm-head{position:sticky; top:0; z-index:1; display:flex; align-items:center; justify-content:space-between; gap:10px;
  min-height:52px; margin:0 -16px 2px; padding:env(safe-area-inset-top) 4px 0 16px; background:#fff; border-bottom:1px solid var(--line)}
.mm-title{font-family:Montserrat,sans-serif; font-weight:700; font-size:17px; color:var(--ink)}
.mm-close{display:flex; align-items:center; justify-content:center; width:48px; height:48px; flex:none; border:0; background:none;
  border-radius:14px; font-size:26px; line-height:1; color:var(--ink); cursor:pointer; -webkit-tap-highlight-color:transparent}
.mm-close:active{background:#F2F3F7}
.mm-panel a{display:flex; align-items:center; min-height:44px; padding:0 2px; border-bottom:1px solid var(--line); color:var(--ink);
  text-decoration:none; font-weight:600; font-size:16px; line-height:1.25}
.mm-panel a.is-on{color:var(--red)}
.mm-panel a.mm-sub{padding-left:14px}
.mm-panel .mm-group{display:block; padding:10px 2px 2px; font-size:12px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--ink-soft)}
.mm-panel .mm-grid{display:grid; grid-template-columns:1fr 1fr; column-gap:14px}
.mm-panel a.mm-game{gap:10px; min-height:46px; margin-top:12px; padding:0 14px; border:1px solid rgba(143,40,34,.22); border-radius:14px;
  background:rgba(143,40,34,.05); color:var(--red); font-weight:700}
.mm-panel a.mm-tel{justify-content:center; min-height:50px; margin-top:10px; padding:0 12px; border:0; border-radius:14px; background:var(--red); color:#fff; font-weight:700}
html.mm-open, html.mm-open body{overflow:hidden}
html.mm-open #sfera-cookie{visibility:hidden}
@media(min-width:900px){.mmenu{display:none}}

/* 28.09: пункт «Игра» — со значком машинки в фирменном цвете, без крика */
.game-ic{width:18px; height:18px; fill:currentColor; flex:none}
.mm-panel a.mm-game .game-ic{width:20px; height:20px}
header.top nav a.nav-game{display:inline-flex; align-items:center; gap:6px; padding:5px 11px; border:1px solid rgba(143,40,34,.25);
  border-radius:999px; color:var(--red); font-weight:600; line-height:1.2}
header.top nav a.nav-game:hover{background:rgba(143,40,34,.06)}
header.top nav a.nav-game .game-ic{width:15px; height:15px}
@media(max-width:1099px){ header.top nav a.nav-game{display:none} }

/* 28.09: разделы инструкций стали H2 (для поиска) — выглядят как прежние H3 */
.doc-body h2.stage, .doc-body h2.sec{font-size:20px; line-height:inherit; margin:24px 0 10px}
h2.stage{scroll-margin-top:calc(var(--hh, 0px) + 70px)}

/* 28.09: автор новости не разрывается */
.news-author{white-space:nowrap}

/* 28.09 (Яков, партия 3): пары «при / после ДТП» — вводный абзац под заголовком и ссылка на парную инструкцию */
.doc-body > p.pair-lead:first-child{margin-top:0; font-size:17px; line-height:1.6; color:var(--ink)}
.pair-link{display:flex; flex-wrap:wrap; align-items:center; gap:6px 10px; margin:24px 0 8px; padding:14px 16px; border-radius:var(--r-md,14px);
  background:#F2F3F7; border-left:4px solid var(--red); font-size:16px; line-height:1.4}
.pair-link span{color:var(--ink-soft); font-weight:600}
.pair-link a{color:var(--red); font-weight:700; text-decoration:none}
.pair-link a:hover{text-decoration:underline}

/* 28.09 (Яков: «короче и по-человечески»): «Коротко: N шагов» сверху и «Подробнее» внутри этапов (<details>, текст индексируется) */
.short-steps{margin:0 0 22px; padding:14px 16px 12px; border-radius:var(--r-md,14px); background:#F2F3F7; border-left:4px solid var(--red)}
.short-steps .short-t{display:block; font-family:Montserrat,sans-serif; font-weight:700; font-size:17px; margin-bottom:6px}
.short-steps ol{margin:0; padding-left:22px}
.short-steps li{margin:4px 0; font-size:16px}
.short-steps a{color:var(--ink); text-decoration:underline; text-decoration-color:rgba(143,40,34,.4); text-underline-offset:3px}
.short-steps .short-more{margin:8px 0 0; font-size:15px; color:var(--ink-soft)}
.short-steps .short-more a{color:var(--red)}
details.more{margin:10px 0 18px; border:1px solid var(--line); border-radius:var(--r-md,14px); background:#fff}
details.more > summary{cursor:pointer; list-style:none; padding:12px 44px 12px 16px; position:relative; font-weight:700; font-size:16px; color:var(--red); -webkit-tap-highlight-color:transparent; min-height:44px; box-sizing:border-box}
details.more > summary::-webkit-details-marker{display:none}
details.more > summary::after{content:''; position:absolute; right:18px; top:50%; width:9px; height:9px; margin-top:-7px; border-right:2px solid currentColor; border-bottom:2px solid currentColor; transform:rotate(45deg); transition:transform .2s}
details.more[open] > summary::after{transform:rotate(-135deg); margin-top:-2px}
details.more > :not(summary){margin-left:16px; margin-right:16px}
details.more[open]{padding-bottom:4px}
h2.stage, h3[id^="razdel-"]{scroll-margin-top:calc(var(--hh, 0px) + 70px)}

/* 28.09 (Яков: «сделай красиво»): рисунок случая над «Коротко» в инструкциях */
.doc-body figure.case-art{margin:4px 0 16px; aspect-ratio:16/7; border-radius:var(--r-md,14px); overflow:hidden; background:#F2F3F7}
.doc-body figure.case-art img{width:100%; height:100%; object-fit:cover; display:block}

/* 28.09 (Яков, партия 4): «← Предыдущая / Следующая →» в новостях */
.news-pn{display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:28px 0 0}
.news-pn a{display:flex; flex-direction:column; gap:4px; padding:12px 14px; border:1px solid var(--line); border-radius:var(--r-md,14px); text-decoration:none; color:var(--ink); background:#fff}
.news-pn a:hover{border-color:var(--red)}
.news-pn small{font-size:13px; font-weight:700; color:var(--red)}
.news-pn span{font-size:14.5px; line-height:1.35; font-weight:600; display:-webkit-box; -webkit-line-clamp:3; -webkit-box-orient:vertical; overflow:hidden}
.news-pn .pn-next{text-align:right}
@media(max-width:560px){ .news-pn{grid-template-columns:1fr} .news-pn .pn-next{text-align:left} }