/* ==========================================================================
   Market — новый дизайн на общей основе сайта (превью /market-preview/).
   Только .market-page; цвета — общие --site-* (Light/Dark без отдельных правил), приёмы главной:
   один синий акцент, кромка 3px, серые карточки. Главный элемент — таблица провайдеров.
   Старые market.css / market-redesign.css не используются (их потребители — текущая /market/ и tools).
   ========================================================================== */

.market-page{ background:var(--site-bg,#fff); }
.market-page #main{ color:var(--site-text,#3a4366); }
.market-page .visually-hidden{ position:absolute!important; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- начало: заголовок, вводная, действие Netts (PR #17 D1) ---------- */
.market-page .mk-top{ padding:16px 0 4px; }
.market-page .mk-crumbs{ display:flex; gap:8px; font-size:13px; color:var(--site-muted,#5c6690); margin-bottom:8px; }
.market-page .mk-crumbs a{ color:var(--site-link,#2d4bdb); text-decoration:none; }
.market-page .mk-h1{ margin:0; font:700 clamp(28px,3vw,36px)/1.15 Inter,system-ui,sans-serif; letter-spacing:-.025em;
  color:var(--site-ink,#0b1020); background:none; -webkit-text-fill-color:currentColor; }
.market-page .mk-lede{ margin:6px 0 0; max-width:760px; font-size:16px; line-height:1.5; }
.market-page .mk-cta{ display:flex; flex-wrap:wrap; align-items:center; gap:10px 18px; margin-top:14px; }
.market-page .mk-cta .hv2-btn{ min-height:44px; padding:10px 18px; font-size:15px; }
.market-page .mk-cta-link{ font-weight:600; color:var(--site-link,#2d4bdb); text-decoration:none; }
.market-page .mk-cta-link:hover{ text-decoration:underline; }
.market-page .mk-generated{ margin:0 0 0 auto; padding:6px 0; font-size:13px; color:var(--site-muted,#5c6690); }
[dir="rtl"] .market-page .mk-generated, .market-page [dir="rtl"] .mk-generated{ margin:0 auto 0 0; }

/* ---------- вкладки и инструменты ---------- */
.market-page .mk-main{ padding:8px 0 32px; }
.market-page .mk-tabbar{ display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:4px 16px; border-bottom:1px solid var(--site-line,#e2e6f2); margin:8px 0 12px; }
.market-page .mk-tabs{ display:flex; gap:4px; margin-bottom:-1px; }
.market-page .mk-tabs[hidden]{ display:none; }
/* Без JavaScript (нет класса mk-js, его ставит встроенный скрипт в <head> до отрисовки): вкладки, инструменты и «Подробнее»
   не нужны — всё содержимое, включая подробности строк, видно. Со скриптом строки приходят уже свёрнутыми — без сдвига. */
:root:not(.mk-js) .market-page .mk-tabs, :root:not(.mk-js) .market-page .mk-tools, :root:not(.mk-js) .market-page .mk-more{ display:none; }
:root.mk-js .market-page tr.mk-detail:not(.is-open){ display:none; }
.market-page .mk-tabs [role="tab"]{ display:inline-flex; align-items:center; gap:6px; min-height:44px; padding:8px 14px; border:0; border-bottom:3px solid transparent;
  background:none; color:var(--site-muted,#5c6690); font:600 15px/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.market-page .mk-tabs [role="tab"][aria-selected="true"]{ color:var(--site-ink,#0b1020); border-bottom-color:var(--site-accent,#2d4bdb); }
.market-page .mk-tabs [role="tab"]:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }
.market-page .mk-note{ margin:0 0 10px; font-size:14px; color:var(--site-muted,#5c6690); }
.market-page .mk-tools{ display:flex; flex-wrap:wrap; align-items:center; gap:8px 14px; margin-bottom:10px; }
.market-page .mk-search{ position:relative; flex:1 1 200px; max-width:280px; margin:0; }
.market-page .mk-search i{ position:absolute; inset-inline-start:12px; top:50%; transform:translateY(-50%); color:var(--site-muted,#5c6690); }
.market-page .mk-search input{ width:100%; min-height:40px; padding:8px 12px; padding-inline-start:36px; border:1px solid var(--site-line-strong,#dce2ef);
  border-radius:8px; background:var(--site-surface,#fff); color:var(--site-ink,#0b1020); font-size:14px; }
.market-page .mk-search input:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:1px; }
.market-page .mk-seg{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.market-page .mk-ctrl-l{ margin-inline-end:4px; font-size:13px; font-weight:600; color:var(--site-muted,#5c6690); }
.market-page .mk-chip{ min-height:36px; padding:6px 12px; border:1px solid var(--site-line-strong,#dce2ef); border-radius:999px; background:var(--site-surface,#fff);
  color:var(--site-text,#3a4366); font:600 13px/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.market-page .mk-chip[aria-pressed="true"]{ border-color:var(--site-accent,#2d4bdb); background:var(--site-accent,#2d4bdb); color:#fff; }
.market-page .mk-chip:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }
/* фильтр «Только с API» — переключатель, а не вариант сортировки: галочка вместо заливки */
.market-page .mk-chip--toggle[aria-pressed="true"]{ background:var(--site-accent-soft,#eef1ff); color:var(--site-link,#2d4bdb); }
.market-page .mk-chip--toggle[aria-pressed="true"]::before{ content:"✓ "; }
.market-page .mk-count{ font-size:13px; color:var(--site-muted,#5c6690); }
.market-page .mk-csv{ margin-inline-start:auto; min-height:36px; padding:6px 4px; border:0; background:none; color:var(--site-link,#2d4bdb); font:600 13px/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.market-page .mk-csv:hover{ text-decoration:underline; }
.market-page .mk-csv:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }

/* ---------- таблица: провайдер → ставка и срок → доступная энергия → действие (PR #17 D2) ---------- */
.market-page .mk-scroll{ border:1px solid var(--site-line,#e2e6f2); border-radius:10px; background:var(--site-surface,#fff); }
.market-page .mk-scroll:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }
.market-page .mk-table{ width:100%; border-collapse:collapse; font-size:15px; }
.market-page .mk-table thead th{ padding:10px 16px; font-size:12px; font-weight:600; text-transform:uppercase; letter-spacing:.03em; color:var(--site-muted,#5c6690);
  background:var(--site-bg-soft,#f6f8fc); text-align:start; white-space:nowrap; border-bottom:1px solid var(--site-line,#e2e6f2); }
.market-page .mk-table td, .market-page .mk-table tbody th{ padding:12px 16px; border-bottom:1px solid var(--site-line,#e2e6f2); vertical-align:middle; text-align:start; }
.market-page .mk-table .num{ text-align:end; font-variant-numeric:tabular-nums; }
.market-page .mk-table thead th.num{ text-align:end; }
.market-page .mk-sort{ display:inline-flex; align-items:center; gap:4px; min-height:32px; padding:0; border:0; background:none; color:inherit; font:inherit; text-transform:inherit; letter-spacing:inherit; cursor:pointer; }
.market-page .mk-sort:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }
.market-page .mk-prov{ font-weight:600; color:var(--site-ink,#0b1020); width:40%; }
.market-page .mk-prov-in{ display:flex; align-items:center; gap:10px; }
.market-page .mk-rank{ flex:none; min-width:1.4em; font-size:13px; font-weight:600; color:var(--site-faint,#8892b8); text-align:end; font-variant-numeric:tabular-nums; }
.market-page .mk-prov img{ flex:none; width:28px; height:28px; border-radius:6px; object-fit:contain; background:var(--site-surface,#fff); }
.market-page .mk-prov-txt{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 8px; min-width:0; }
.market-page .mk-name{ font-size:15px; }
.market-page .mk-badge{ display:inline-block; padding:1px 8px; border-radius:999px; font-size:12px; font-weight:600; border:1px solid var(--site-line-strong,#dce2ef);
  color:var(--site-text,#3a4366); background:var(--site-surface,#fff); }
.market-page .mk-badge--netts{ border-color:var(--site-accent,#2d4bdb); background:var(--site-accent,#2d4bdb); color:#fff; }
.market-page tr.is-netts > *{ background:var(--site-accent-soft,#eef1ff); }
.market-page tr.mk-row.is-netts > :first-child{ box-shadow:inset 3px 0 0 var(--site-accent,#2d4bdb); }
.market-page [dir="rtl"] tr.mk-row.is-netts > :first-child{ box-shadow:inset -3px 0 0 var(--site-accent,#2d4bdb); }
.market-page .mk-rate strong{ font:700 19px/1.2 Inter,system-ui,sans-serif; color:var(--site-ink,#0b1020); }
.market-page .mk-unit{ font-size:13px; color:var(--site-muted,#5c6690); }
.market-page .mk-term{ display:block; font-size:13px; font-weight:600; color:var(--site-ink,#0b1020); }
.market-page .mk-below{ display:block; font-size:13px; color:var(--site-muted,#5c6690); }   /* нейтрально: один акцент — синий */
.market-page .mk-na{ color:var(--site-faint,#8892b8); }
.market-page .mk-table .mk-act{ white-space:nowrap; text-align:end; }   /* сильнее общего «.mk-table td { text-align:start }»: кнопки — к правому краю, как заголовок столбца */
.market-page .mk-act-h{ text-align:end!important; }
/* все кнопки действия одной ширины (Арендовать / Сайт / Бот) — ровная колонка, «Подробнее» на одной вертикали (замечание владельца) */
.market-page .mk-go{ display:inline-flex; align-items:center; justify-content:center; min-width:120px; min-height:36px; padding:6px 14px; border:1px solid var(--site-line-strong,#dce2ef); border-radius:8px;
  color:var(--site-ink,#0b1020); font-weight:600; font-size:14px; text-decoration:none; background:var(--site-surface,#fff); }
.market-page .mk-go:hover{ border-color:var(--site-accent,#2d4bdb); color:var(--site-link,#2d4bdb); }
.market-page .mk-go--netts{ border-color:var(--site-accent,#2d4bdb); background:var(--site-accent,#2d4bdb); color:#fff; }
.market-page .mk-go--netts:hover{ color:#fff; filter:brightness(1.08); }
.market-page .mk-go:focus-visible, .market-page .mk-more:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }
.market-page .mk-more{ min-height:36px; margin-inline-start:6px; padding:6px 8px; border:0; background:none; color:var(--site-link,#2d4bdb); font:600 14px/1.2 Inter,system-ui,sans-serif; cursor:pointer; }
.market-page .mk-more i{ display:inline-block; transition:transform .15s; }
.market-page .mk-more[aria-expanded="true"] i{ transform:rotate(180deg); }
/* подробности строки: без JS — видны; со скриптом — по кнопке «Подробнее» */
:root:not(.mk-js) .market-page tr.mk-row > *, .market-page tr.mk-row:has(+ tr.mk-detail.is-open:not([hidden])) > *{ border-bottom-color:transparent; }
.market-page .mk-detail > td{ padding:0 16px 14px; }
.market-page .mk-detail-in{ display:flex; flex-direction:column; gap:8px; padding-inline-start:calc(1.4em + 48px); font-size:14px; }
.market-page .mk-detail-note{ margin:0; max-width:720px; color:var(--site-text,#3a4366); }
.market-page .mk-facts{ display:flex; flex-wrap:wrap; gap:6px 24px; margin:0; }
.market-page .mk-facts > div{ display:flex; align-items:center; gap:8px; }
.market-page .mk-facts dt{ font-weight:500; color:var(--site-muted,#5c6690); }
.market-page .mk-facts dd{ margin:0; color:var(--site-ink,#0b1020); font-variant-numeric:tabular-nums; }
.market-page .mk-types{ display:flex; flex-wrap:wrap; gap:4px; }
.market-page .mk-type{ padding:2px 8px; border-radius:5px; font-size:13px; background:var(--site-bg-soft,#f6f8fc); color:var(--site-text,#3a4366); }
.market-page tr.is-netts .mk-type{ background:var(--site-surface,#fff); }
.market-page .mk-type--api{ background:var(--site-accent-soft,#eef1ff); color:var(--site-link,#2d4bdb); font-weight:600; }
.market-page .mk-links{ display:flex; flex-wrap:wrap; align-items:center; gap:4px 14px; margin:0; }
.market-page .mk-links-l{ color:var(--site-muted,#5c6690); }
.market-page .mk-links a{ color:var(--site-link,#2d4bdb); font-weight:600; text-decoration:none; }
.market-page .mk-links a:hover{ text-decoration:underline; }
.market-page .mk-links a:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }
.market-page .mk-empty{ margin:0; padding:16px; color:var(--site-muted,#5c6690); }

/* ---------- показатели сети — после сравнения ---------- */
.market-page .mk-net{ padding:8px 0 40px; }
.market-page .mk-h2{ margin:0 0 12px; font:700 20px/1.3 Inter,system-ui,sans-serif; color:var(--site-ink,#0b1020); background:none; -webkit-text-fill-color:currentColor; }
.market-page .mk-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:0; }
/* карточка — колонка: значение прижато к низу, у всех карточек ряда на одной линии, сколько бы строк ни заняла подпись */
.market-page .mk-stats > div{ display:flex; flex-direction:column; padding:12px 14px; border-radius:8px; background:var(--site-bg-soft,#f6f8fc); min-width:0; }
.market-page .mk-stats dt{ font-size:13px; font-weight:500; line-height:1.3; color:var(--site-muted,#5c6690); margin-bottom:4px; }
.market-page .mk-stats dd{ margin:auto 0 0; font:700 18px/1.2 Inter,system-ui,sans-serif; color:var(--site-ink,#0b1020); font-variant-numeric:tabular-nums; overflow-wrap:anywhere; }

/* ---------- график ---------- */
.market-page .mk-chart-head{ display:flex; flex-direction:column; align-items:flex-start; gap:12px; margin-bottom:12px; }   /* заголовок сверху, кнопки всегда строкой ниже слева */
.market-page .mk-swap{ display:grid; }
.market-page .mk-swap > span{ grid-area:1 / 1; }
.market-page .mk-swap > .is-off{ visibility:hidden; }
.market-page .mk-chip:disabled{ opacity:.45; cursor:not-allowed; }
.market-page .mk-chart-title{ margin:0; font:700 20px/1.3 Inter,system-ui,sans-serif; color:var(--site-ink,#0b1020); background:none; -webkit-text-fill-color:currentColor; }
.market-page .mk-chart-sub{ margin:4px 0 0; font-size:13px; color:var(--site-muted,#5c6690); }   /* как прочие подписи; цвет темы — из --site-* */
.market-page .mk-chart-ctrl{ display:flex; flex-wrap:wrap; gap:8px 16px; }
.market-page .mk-chart-ctrl > div{ display:flex; flex-wrap:wrap; align-items:center; gap:4px; }
.market-page .mk-ctrl-l{ margin-inline-end:4px; font-size:12px; font-weight:600; color:var(--site-muted,#5c6690); }
.market-page .mk-chart{ position:relative; height:420px; border:1px solid var(--site-line,#e2e6f2); border-radius:10px; background:var(--site-surface,#fff); direction:ltr; }
.market-page .mk-chart[data-state]::after{ content:attr(data-state); position:absolute; inset:0; display:flex; align-items:center; justify-content:center; color:var(--site-muted,#5c6690); font-size:14px; }
.market-page .mk-chart-stats{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:8px; margin:12px 0 0; }
.market-page .mk-chart-stats > div{ display:flex; flex-direction:column; padding:10px 12px; border-radius:8px; background:var(--site-bg-soft,#f6f8fc); }
.market-page .mk-chart-stats dt{ font-size:12px; color:var(--site-muted,#5c6690); margin-bottom:4px; }
.market-page .mk-chart-stats dd{ margin:auto 0 0; font:700 17px/1.2 Inter,system-ui,sans-serif; color:var(--site-ink,#0b1020); font-variant-numeric:tabular-nums; }

/* ---------- компьютер: показатели сети справа от заголовка (решение владельца 08.10.2026) ----------
   Один блок в HTML; сетка .mk-layout ставит его в пустую колонку рядом с заголовком, таблица не сдвигается.
   Ниже 1280 px (на 1200 русская вводная переносится и колонка сдвигала бы таблицу) — порядок документа: показатели после таблицы. */
@media (min-width:1280px){
  .market-page .mk-layout{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,500px); grid-template-areas:"top net" "main main"; column-gap:32px; align-items:end; }
  .market-page .mk-layout > .mk-top{ grid-area:top; }
  .market-page .mk-layout > .mk-main{ grid-area:main; }
  .market-page .mk-layout > .mk-net{ grid-area:net; padding:16px 0 4px; }
  .market-page .mk-net .mk-stats{ gap:6px; }
  .market-page .mk-net .mk-stats > div{ padding:7px 10px; }
  .market-page .mk-net .mk-stats dt{ font-size:11.5px; margin-bottom:2px; }
  .market-page .mk-net .mk-stats dd{ font-size:15px; }
}

/* ---------- текст и FAQ ---------- */
.market-page .mk-guide{ padding:48px 0; }
.market-page .mk-guide-intro{ max-width:860px; margin:10px 0 20px; font-size:16px; line-height:1.6; }
.market-page .mk-guide-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:20px 32px; align-items:start;
  grid-template-areas:"s1 s2" "s3 s2" "s4 s4"; grid-template-rows:auto 1fr auto; }   /* высокий раздел расчёта — справа на две строки, без пустоты под коротким */
.market-page .mk-g-s1{ grid-area:s1; } .market-page .mk-g-s2{ grid-area:s2; } .market-page .mk-g-s3{ grid-area:s3; } .market-page .mk-g-s4{ grid-area:s4; }
.market-page .mk-g-s4 .mk-next{ display:flex; flex-wrap:wrap; gap:6px 24px; padding:0; list-style:none; }   /* ссылки «Что дальше» — строкой на всю ширину */
.market-page .mk-guide h3{ margin:0 0 6px; font:700 18px/1.3 Inter,system-ui,sans-serif; color:var(--site-ink,#0b1020); background:none; -webkit-text-fill-color:currentColor; }
.market-page .mk-guide p, .market-page .mk-guide li{ font-size:15px; line-height:1.6; }
.market-page .mk-guide p{ margin:0 0 8px; }
.market-page .mk-guide ul{ margin:6px 0 0; padding-inline-start:20px; list-style:disc; }
.market-page .mk-guide ul:not(.mk-next) > li{ list-style:disc; }   /* общий стиль сайта снимает маркер у li */
.market-page .mk-guide a{ color:var(--site-link,#2d4bdb); text-decoration:underline; }
.market-page .mk-faq-title{ margin-top:36px; }
.market-page .mk-faq{ margin-top:10px; max-width:860px; }
.market-page .mk-faq details{ border-bottom:1px solid var(--site-line,#e2e6f2); }
.market-page .mk-faq summary{ padding:12px 0; font-weight:600; color:var(--site-ink,#0b1020); cursor:pointer; }
.market-page .mk-faq summary:focus-visible{ outline:3px solid var(--site-link,#2d4bdb); outline-offset:2px; }
.market-page .mk-faq p{ margin:0 0 12px; }
.market-page .mk-list{ margin-top:32px; max-width:860px; }
.market-page .mk-list-title{ margin:0 0 4px; font:700 16px/1.3 Inter,system-ui,sans-serif; color:var(--site-ink,#0b1020); background:none; -webkit-text-fill-color:currentColor; }
.market-page .mk-list p{ margin:0; font-size:14px; }
.market-page .mk-list a{ font-weight:600; }

/* ---------- адаптив ---------- */
@media (max-width:767.98px){
  .market-page .mk-top{ padding:12px 0 0; }
  .market-page .mk-lede{ font-size:15px; }
  .market-page .mk-cta{ margin-top:10px; gap:8px 16px; }
  .market-page .mk-generated{ margin:0; padding:0 0 6px; flex-basis:100%; font-size:12px; }
  .market-page .mk-tabbar{ flex-direction:column-reverse; align-items:stretch; }
  .market-page .mk-search{ max-width:none; flex-basis:100%; }
  .market-page .mk-seg{ flex-basis:100%; }   /* своя строка: перенос не зависит от шрифта (подмена Inter не сдвигает «Только с API», CLS) */
  .market-page .mk-csv{ margin-inline-start:0; }
  .market-page .mk-stats{ grid-template-columns:repeat(2,minmax(0,1fr)); }
  .market-page .mk-guide-grid, .market-page .mk-chart-stats{ grid-template-columns:minmax(0,1fr); }
  .market-page .mk-guide-grid{ grid-template-areas:"s1" "s2" "s3" "s4"; }
  .market-page .mk-g-s4 .mk-next{ flex-direction:column; gap:4px; }
  .market-page .mk-chart{ height:320px; }
  /* телефон: строка — карточка. 1-я линия: провайдер | ставка и срок; 2-я: доступная энергия | действие; подробности — ниже */
  .market-page .mk-scroll{ border:0; background:none; }
  .market-page .mk-table thead{ display:none; }
  .market-page .mk-table, .market-page .mk-table tbody{ display:block; }
  .market-page .mk-table tr.mk-row{ display:grid; grid-template-columns:minmax(0,1fr) auto; grid-template-areas:"prov price" "avail avail" "act act"; gap:6px 12px; align-items:center; margin-top:8px; padding:12px;
    border:1px solid var(--site-line,#e2e6f2); border-radius:10px 10px 0 0; background:var(--site-surface,#fff); }
  :root.mk-js .market-page .mk-table tr.mk-row:has(+ tr.mk-detail:not(.is-open)), .market-page .mk-table tr.mk-row:has(+ tr.mk-detail[hidden]){ border-radius:10px; }
  .market-page .mk-table tr.mk-row > *{ padding:0; border:0; background:none!important; box-shadow:none!important; width:auto; }
  .market-page .mk-table tr.mk-row.is-netts{ border-color:var(--site-accent,#2d4bdb); background:var(--site-accent-soft,#eef1ff); }
  .market-page .mk-table .mk-prov{ grid-area:prov; }
  .market-page .mk-table .mk-price{ grid-area:price; }
  .market-page .mk-table .mk-avail{ grid-area:avail; text-align:start; font-size:14px; color:var(--site-muted,#5c6690); }
  .market-page .mk-table .mk-act{ grid-area:act; display:flex; align-items:center; justify-content:space-between; }
  .market-page .mk-prov-txt{ flex-direction:column; align-items:flex-start; gap:2px; }
  .market-page .mk-badge{ white-space:nowrap; }
  .market-page .mk-table .mk-avail::before{ content:attr(data-l) ": "; }
  .market-page .mk-table tr.mk-detail{ display:block; padding:0 12px 12px; border:1px solid var(--site-line,#e2e6f2); border-top:0; border-radius:0 0 10px 10px; background:var(--site-surface,#fff); }
  .market-page .mk-table tr.mk-detail[hidden]{ display:none; }
  .market-page .mk-table tr.mk-detail.is-netts{ border-color:var(--site-accent,#2d4bdb); background:var(--site-accent-soft,#eef1ff); }
  .market-page .mk-table tr.mk-detail > td{ display:block; padding:0; border:0; background:none!important; }
  .market-page .mk-detail-in{ padding-inline-start:0; padding-top:8px; border-top:1px solid var(--site-line,#e2e6f2); }
}