/* Третья версия серверных страниц — слой поверх seo.css (концепт 29.09,
   docs/concept-2026-09-29.md, раздел 5.1). Подключает app/seo.py только по
   cookie benz_ui=v3 (middleware SeoPreview) — без неё страницы прежние.

   Что меняет:
   - одна палитра с картой: текст, подписи, акцент и статусы — значения
     подобраны с запасом по WCAG (числа — в таблице раздела 5.1);
   - третьего уровня текста нет: --muted-2 = --muted (#939BA4 давал 2,60:1 —
     самый частый провал замера: крошки, подписи, сноски);
   - цели касания от 44 px: кнопки, чипы, теги, крошки, ссылки каталогов;
     строка заправки — одна ссылка во всю строку высотой от 68 px;
   - наведение только мышью и видимый фокус с клавиатуры: 3 px акцентом. */
:root {
  --text: #101418; --muted: #5A6270; --muted-2: #5A6270;
  --accent: #1D55E0; --accent-2: #E6EDFF; --on-accent: #FFFFFF;
  --available: #12704A; --available-2: #DDF5E8; --available-3: #BCE8D0;
  --uncertain: #875B00; --uncertain-2: #FFF1D6; --uncertain-3: #F3DDA8;
  --unavailable: #B2372F; --unavailable-2: #FBE4E1; --unavailable-3: #F3CBC6;
  --unknown: #5A6270; --unknown-2: #EEF0F2; --unknown-3: #DFE3E8;
}
@media (prefers-color-scheme: dark) {
  :root {
    --text: #F3F4F6; --muted: #A2ABB5; --muted-2: #A2ABB5;
    --accent: #6E9BFF; --accent-2: rgba(110, 155, 255, .18); --on-accent: #0B1020;
    --available: #3DD084; --available-2: rgba(61, 208, 132, .18); --available-3: rgba(61, 208, 132, .32);
    --uncertain: #F2B233; --uncertain-2: rgba(242, 178, 51, .18); --uncertain-3: rgba(242, 178, 51, .32);
    --unavailable: #FF7A6E; --unavailable-2: rgba(255, 122, 110, .18); --unavailable-3: rgba(255, 122, 110, .32);
    --unknown: #A2ABB5; --unknown-2: rgba(162, 171, 181, .16); --unknown-3: rgba(162, 171, 181, .28);
  }
}

/* --- цели касания ------------------------------------------------------------------ */
.btn, .cta .btn, .actionbar .btn { min-height: 44px; }
.btn--map { box-shadow: 0 2px 10px rgba(29, 85, 224, .25); }
.chip { min-height: 44px; }
.tag { min-height: 44px; }
/* крошки остаются строкой с многоточием (flex съел бы пробелы вокруг «›»): высоту нажатия
   даёт внутренний отступ ссылки — он расширяет область нажатия, не ломая строку */
.crumbs { padding: 12px 0; margin-bottom: 0; line-height: 20px; }
.crumbs a { padding: 14px 6px; margin: 0 -6px; }   /* у строчной ссылки высота — шрифт (~17 px), не line-height; по бокам — в пробелы вокруг «›» */
.top__brand { min-height: 44px; }
.v3bar a, .mini a { padding: 14px 0; }
.grid li { padding: 0; }
.grid li a { display: block; padding: 11px 0; }
.links a, .foot a { display: inline-block; padding: 11px 0; line-height: 22px; }
/* строка заправки: ссылка названия растянута на всю строку */
.row { min-height: 68px; }
.row__name::after { content: ""; position: absolute; inset: 0; }
.row .pill { position: relative; z-index: 1; pointer-events: none; }

/* --- наведение: только мышь -------------------------------------------------------- */
@media (hover: hover) and (pointer: fine) {
  .row:has(.row__name[href]):hover { background: var(--fill); }
  .btn:hover { filter: brightness(.95); }
  .tag:hover { background: var(--fill); border-color: var(--border-2); }
  .grid li a:hover, .links a:hover, .foot a:hover, .crumbs a:hover, .card a:hover, .faq a:hover { text-decoration: underline; }
}

/* --- фокус с клавиатуры ------------------------------------------------------------- */
a:focus-visible, button:focus-visible, summary:focus-visible, input:focus-visible, select:focus-visible {
  outline: 3px solid var(--accent); outline-offset: 2px; border-radius: 8px;
}
.row__name:focus-visible { outline: none; }
.row:has(.row__name:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }

/* --- полоска предпросмотра ----------------------------------------------------------- */
.v3bar { margin: 0; padding: 8px 16px; text-align: center; font-size: 14px; color: var(--text); background: var(--accent-2); }
.v3bar a { font-weight: 620; }

/* --- страница заправки v3 (раздел 5.2) ---------------------------------------------- */
.g3 { flex: none; vertical-align: -3px; }
.answer__state { display: flex; align-items: center; gap: 10px; }
.answer__price.is-old, .fuel__price.is-old, .nearest3__price.is-old { color: var(--muted); font-weight: 560; }
.answer__work { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 0; }
.answer__acts { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 9px; margin: 14px 0 0; }
.answer__acts .btn { min-height: 48px; padding: 0 18px; }
.btn--route { background: var(--accent); color: var(--on-accent); flex: 1 1 auto; }
.work3, .flag3 { display: inline-flex; align-items: center; gap: 7px; min-height: 32px; padding: 0 12px; border-radius: 999px;
  font-size: 14px; font-weight: 600; background: var(--solid); color: var(--text); border: 1px solid var(--border-2); }
.work3 { color: var(--available); }
.work3__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--available); }
.chips3 { display: flex; flex-wrap: wrap; gap: 9px; margin: 12px 0 0; }
.feats3 { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
.fuel__state { display: flex; align-items: center; gap: 4px; }
.nearest3 { margin: 12px 0 0; box-shadow: var(--elev-sm), inset 0 0 0 2px var(--available-3); }
.nearest3__hd { font-size: 16px; font-weight: 680; color: var(--text); margin: 0 0 10px; }
.nearest3__row { display: grid; grid-template-columns: auto 1fr auto; gap: 12px; align-items: center; }
.nearest3__txt { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.nearest3__name { font-weight: 640; color: var(--text); overflow-wrap: anywhere; }
.nearest3__st { font-size: 14px; font-weight: 620; color: var(--available); }   /* строкой: перенос уходит под значок, а не рядом */
.nearest3__st .g3 { margin-right: 4px; }
.nearest3__price { font-size: 19px; font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.nearest3 .answer__acts { margin-top: 12px; }
/* нижняя панель — только когда ответ ушёл за экран (класс ставит скрипт страницы) */
.actionbar { transition: transform .2s ease; }
.actionbar.is-away { transform: translateY(115%); }
@media (prefers-reduced-motion: reduce) { .actionbar { transition: none; } }
/* крошки на телефоне — без последнего звена: оно и так в заголовке и в разметке */
@media (max-width: 560px) {
  .crumbs [aria-current="page"], .crumbs .sep:nth-last-child(2) { display: none; }
}

/* --- раскладка страницы заправки (раздел 5.2) ------------------------------------------
   Телефон — одна колонка. От 600 px ответ и марки рядом (у марок три в ряд). От 1024 px
   справа колонка «Рядом» со схемой соседей; верх и низ — слева. */
.sch3 { display: none; }
@media (min-width: 600px) {
  .st3__lead { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 16px; align-items: start; }
  .st3__fuels > h2:first-child { margin-top: 12px; }
  .st3__fuels .fuels { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1024px) {
  .page:has(.st3) { max-width: 72rem; }
  .st3 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "top side" "rest side"; column-gap: 28px; align-items: start; }
  .st3__top { grid-area: top; }
  .st3__rest { grid-area: rest; }
  .st3__side { grid-area: side; }
  .st3__side > h2:first-child { margin-top: 12px; }
  .st3__side .row__meta { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .sch3 { display: block; margin: 0 0 10px; padding: 8px 8px 10px; background: var(--solid); border: 1px solid var(--border);
    border-radius: var(--r-lg); box-shadow: var(--elev-sm); }
}
@media (min-width: 1024px) and (min-height: 760px) {
  /* без рекламы колонка «Заправки рядом» липкая целиком; с рекламой липкий только
     блок рекламы в её конце, а колонка тянется на всю высоту (иначе ему некуда ехать) */
  .st3__side:not(:has(.ad3--side)) { position: sticky; top: calc(67px + 16px); }
}
@media (min-width: 1024px) {
  .st3__side:has(.ad3--side), .pl3__side:has(.ad3--side) { align-self: stretch; }
}
.sch3 svg { display: block; width: 100%; height: auto; }
.sch3__ring { fill: none; stroke: var(--border-2); stroke-width: 1.5; stroke-dasharray: 4 5; }
.sch3__hit { fill: transparent; }
.sch3__pt { stroke: var(--solid); stroke-width: 2; }
.sch3__pt.is-yes, .sch3__k.is-yes { fill: var(--available); background: var(--available); }
.sch3__pt.is-maybe, .sch3__k.is-maybe { fill: var(--uncertain); background: var(--uncertain); }
.sch3__pt.is-no, .sch3__k.is-no { fill: var(--unavailable); background: var(--unavailable); }
.sch3__pt.is-unk, .sch3__k.is-unk { fill: var(--unknown); background: var(--unknown); }
.sch3 a:hover .sch3__pt { stroke: var(--text); }
.sch3__me { fill: var(--solid); stroke: var(--accent); stroke-width: 3; }
.sch3__mec { fill: var(--accent); }
.sch3 figcaption { display: flex; flex-wrap: wrap; gap: 4px 12px; margin: 4px 6px 0; font-size: 13px; color: var(--muted); }
.sch3__k { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 5px; vertical-align: -1px; }
.sch3__k.is-me { background: var(--solid); box-shadow: inset 0 0 0 2.5px var(--accent); }
.sch3__k.is-ring { width: 14px; background: none; border: 1.5px dashed var(--muted); }
/* карточки без заголовка над ними шли вплотную друг к другу */
.st3 .card--forecast, .st3 .card--ask { margin-top: 16px; }

/* --- страница места v3 (раздел 5.3): ответ и сразу список ------------------------------
   Телефон — строка: логотип · сеть и адрес (+ «платили …») · цена и статус. ПК от 1024 px —
   таблица «заправка · статус · цена · оплаты», справа цены, «сегодня» и схема места. */
.marks3 { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
/* на телефоне марки — лентой: пять чипов в три строки отодвигали ответ на полэкрана */
@media (max-width: 599px) {
  .marks3 { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin: 12px -16px 0; padding: 0 16px 2px;
    scroll-padding: 0 16px; }
  .marks3::-webkit-scrollbar { display: none; }
  .marks3 .tag { flex: none; }
}
.answer3 { margin: 12px 0 0; padding: 16px 18px; border-radius: var(--r-lg); background: var(--solid);
  border: 1px solid var(--border); box-shadow: var(--elev-sm); }
.answer3__big { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 22px; font-weight: 680;
  letter-spacing: -.02em; line-height: 1.2; color: var(--text); }
.answer3__big b { color: var(--available); font-weight: 760; }
.answer3__sub { margin: 6px 0 0; font-size: 15px; color: var(--muted); }
.answer3.is-no { background: var(--unavailable-2); border-color: var(--unavailable-3); }
.answer3.is-no .answer3__big { color: var(--unavailable); }
.list3 { margin: 16px 0 0; }
.sort3 { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 12px; }
.sort3[hidden], .sort3__msg[hidden] { display: none; }
.sort3 .btn { min-height: 44px; padding: 0 14px; border: 1px solid var(--border-2); background: var(--solid);
  font-family: inherit; cursor: pointer; }
.sort3 .btn[aria-pressed="true"] { background: var(--text); color: var(--bg); border-color: var(--text); }
.sort3 .btn:disabled { opacity: .6; }
.sort3__msg { margin: -4px 2px 12px; font-size: 14px; color: var(--muted); }
.rows3 { list-style: none; margin: 0; padding: 0; background: var(--solid); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--elev-sm); overflow: hidden; }
.rows3:empty { display: none; }
.rows3__head { display: none; }
.r3 { position: relative; display: grid; grid-template-columns: 40px minmax(0, 1fr) auto; column-gap: 12px;
  align-items: center; min-height: 68px; padding: 10px 14px; box-sizing: border-box; }
.r3 + .r3::before { content: ""; position: absolute; left: 66px; right: 0; top: 0; height: 1px; background: var(--border); }
.r3__mid { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.r3__name { font-weight: 640; color: var(--text); text-decoration: none; min-width: 0; }
.r3__name::after { content: ""; position: absolute; inset: 0; }
.r3__name:focus-visible { outline: none; }
.r3:has(.r3__name:focus-visible) { outline: 3px solid var(--accent); outline-offset: -3px; border-radius: 12px; }
.r3__addr { display: block; font-weight: 400; font-size: 14px; color: var(--muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.r3__km { color: var(--text); font-weight: 620; }
.vh3 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.r3__paid { font-size: 13px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.r3__paid::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%;
  background: var(--available); margin-right: 6px; vertical-align: 1px; }
.r3__end { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; }
.r3__price { font-size: 17px; font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; color: var(--text); }
.r3__price:empty { display: none; }
.r3__price.is-old { color: var(--muted); font-weight: 560; }
.r3__st { display: inline-flex; align-items: center; gap: 4px; font-size: 14px; font-weight: 620; white-space: nowrap; color: var(--unknown); }
.r3.is-yes .r3__st { color: var(--available); }
.r3.is-maybe .r3__st { color: var(--uncertain); }
.r3.is-no .r3__st { color: var(--unavailable); }

/* значок статуса в строке — маской из стилей, а не SVG в каждой строке: у Москвы 661 строка,
   встроенные значки добавляли к странице 165 КБ (те же формы, что _GLYPH3 в app/seo.py) */
.r3__st::before { content: ""; flex: none; width: 16px; height: 16px; background: currentColor;
  -webkit-mask: var(--g3) center / 16px no-repeat; mask: var(--g3) center / 16px no-repeat; }
.r3.is-yes { --g3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M5.8 10.4l2.7 2.7 5.7-5.9' fill='none' stroke='black' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); }
.r3.is-maybe { --g3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M7.6 7.6a2.5 2.5 0 1 1 3.6 2.3c-.7.3-1.1.8-1.1 1.6v.4' fill='none' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3Ccircle cx='10' cy='14.6' r='1.2' fill='black'/%3E%3C/svg%3E"); }
.r3.is-no { --g3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Cpath d='M6.8 6.8l6.4 6.4M13.2 6.8l-6.4 6.4' stroke='black' stroke-width='2.2' stroke-linecap='round'/%3E%3C/svg%3E"); }
.r3.is-unk { --g3: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20'%3E%3Ccircle cx='10' cy='10' r='6.5' fill='none' stroke='black' stroke-width='1.8' stroke-dasharray='2.6 2.4'/%3E%3C/svg%3E"); }
.more3 { margin: 10px 0 0; }
.more3 > summary { display: flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 18px;
  border-radius: 999px; background: var(--fill); color: var(--text); font-weight: 620; cursor: pointer; list-style: none; }
.more3 > summary::-webkit-details-marker { display: none; }
.more3[open] > summary { margin-bottom: 10px; }
.more3--tags > summary { width: max-content; max-width: 100%; }
@media (hover: hover) and (pointer: fine) {
  .r3:hover { background: var(--fill); }
  .more3 > summary:hover { filter: brightness(.96); }
}
.sch3__dots { fill: none; stroke-width: 5; stroke-linecap: round; }
.sch3__dots.is-yes { stroke: var(--available); }
.sch3__dots.is-maybe { stroke: var(--uncertain); }
.sch3__dots.is-no { stroke: var(--unavailable); }
.sch3__dots.is-unk { stroke: var(--unknown); opacity: .7; }
.sch3--city a { display: block; }
@media (min-width: 1024px) {
  .page:has(.pl3) { max-width: 72rem; }
  .pl3 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; grid-template-areas: "top side" "rest side";
    column-gap: 28px; align-items: start; }
  .pl3__top { grid-area: top; }
  .pl3__rest { grid-area: rest; }
  .pl3__side { grid-area: side; }
  .pl3__side > :first-child { margin-top: 12px; }
  .rows3__head, .r3 { grid-template-columns: 40px minmax(0, 1fr) 150px 96px 170px; }
  .rows3__head { display: grid; column-gap: 12px; margin: 0; padding: 0 15px 8px; font-size: 13px; color: var(--muted); }
  .rows3__head span:first-child { grid-column: 2; }
  .rows3__head span:nth-child(3) { text-align: right; }
  .r3 > :first-child { grid-column: 1; grid-row: 1; }
  .r3__mid, .r3__end { display: contents; }
  .r3__name { grid-column: 2; grid-row: 1; }
  .r3__st { grid-column: 3; grid-row: 1; }
  .r3__price { grid-column: 4; grid-row: 1; text-align: right; }
  .r3__paid { grid-column: 5; grid-row: 1; }
}

/* --- цены v3 (раздел 5.6): литр крупно, «обычно A–B» вместо «до 104 ₽» ---------------- */
.prices3 { margin: 12px 0 0; padding: 4px 18px 12px; background: var(--solid); border: 1px solid var(--border);
  border-radius: var(--r-lg); box-shadow: var(--elev-sm); }
.prices3 ul { list-style: none; margin: 0; padding: 0; }
.pr3 { display: grid; grid-template-columns: 76px auto 1fr; align-items: baseline; gap: 2px 12px; padding: 10px 0; }
.pr3 + .pr3 { border-top: 1px solid var(--border); }
.pr3__mark { font-size: 15px; font-weight: 620; color: var(--muted); }
.pr3__med { font-size: 24px; font-weight: 720; letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--text); white-space: nowrap; }
.pr3__sub { grid-column: 2 / -1; font-size: 14px; color: var(--muted); }
.prices3 .note { margin: 6px 0 0; }
@media (min-width: 600px) { .pr3__sub { grid-column: 3; } }
/* график цены — есть и в v2, но там линий не видно: переменных --blue, --green, --orange,
   --separator, --label-3 в seo.css нет. Цвета серий — категориальные по марке (проверены
   валидатором палитры для обеих тем), а не статусные: зелёный «есть» здесь ничего не значит */
:root { --blue: #2a78d6; --green: #1baf7a; --orange: #eb6834; --separator: var(--border-2); --label-3: var(--muted); }
@media (prefers-color-scheme: dark) { :root { --blue: #3987e5; --green: #199e70; --orange: #d95926; } }
.trend h2 { margin: 0 0 10px; font-size: 17px; }
.trend__svg { display: block; width: 100%; height: auto; }
.trend__legend { margin: 10px 0 0; font-size: 14px; color: var(--text); }
.trend__key { white-space: nowrap; }
.trend__key::before { content: ""; display: inline-block; width: 14px; height: 3px; border-radius: 2px; background: var(--c);
  margin-right: 6px; vertical-align: 4px; }
.trend .hint { margin: 8px 0 0; font-size: 13px; color: var(--muted); }