/* Оформление инструмента «operator-compare».
 *
 * Раньше эта таблица лежала строкой в js/tools/operator-compare.js и вставлялась
 * через createElement('style') — ради этого в Content-Security-Policy
 * держали style-src 'unsafe-inline', то есть разрешали любой инлайновый
 * стиль на всех страницах пяти сайтов. Вынесено 27.07.2026.
 *
 * Файл подключается partial'ом tools.html только на странице своего
 * инструмента и с отпечатком содержимого в адресе (asset-url.html):
 * имя постоянное, кэш недельный.
 */

#tool-operator-compare .oc-lead{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--color-muted)}
#tool-operator-compare .oc-filters{margin:0;padding:14px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper)}
#tool-operator-compare .oc-legend{margin:0 0 10px;padding:0;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
#tool-operator-compare .oc-check{display:flex;gap:9px;align-items:flex-start;font-size:15px;line-height:1.45;cursor:pointer;font-weight:400}
#tool-operator-compare .oc-check + .oc-check{margin-top:9px}
#tool-operator-compare .oc-check input{margin:0;width:17px;height:17px;flex:0 0 auto;accent-color:var(--color-accent);margin-top:2px}
#tool-operator-compare .oc-reset{margin:12px 0 0;padding:5px 12px;border:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-muted);border-radius:999px;font:inherit;font-size:13px;cursor:pointer}
#tool-operator-compare .oc-reset:hover{border-color:var(--color-accent);color:var(--color-accent)}
#tool-operator-compare .oc-count{margin:18px 0 8px;font-size:15px;line-height:1.5}
#tool-operator-compare .oc-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper)}
#tool-operator-compare table{border-collapse:collapse;width:100%;min-width:600px;table-layout:fixed;font-size:13.5px}
/* 110 px не хватало: «СберМобайл» занимает 130 px и при table-layout:fixed
   вылезал из ячейки поверх соседней колонки — на телефоне это выглядело
   как «СберМобай.» с обрезанным хвостом. Поймано 27.07.2026 на проде.
   Ширина взята по самому длинному названию с запасом, а break-word
   оставлен страховкой: следующий оператор может оказаться длиннее. */
#tool-operator-compare col.oc-c0{width:138px}
#tool-operator-compare thead th{background:var(--color-surface);text-align:left;padding:9px 10px;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--color-muted);font-weight:500;border-bottom:1px solid var(--color-rule)}
#tool-operator-compare tbody th{text-align:left;padding:9px 10px;font-family:var(--font-display);font-weight:700;font-size:14px;vertical-align:top;overflow-wrap:break-word;hyphens:none}
#tool-operator-compare tbody td{padding:9px 10px;vertical-align:top;line-height:1.4}
#tool-operator-compare tbody tr + tr th,#tool-operator-compare tbody tr + tr td{border-top:1px solid var(--color-rule)}
#tool-operator-compare .oc-hint{margin:7px 0 0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted)}
#tool-operator-compare .oc-v{display:inline-block;padding:3px 8px;border-radius:6px;font-weight:500;word-break:normal;hyphens:none}
#tool-operator-compare .oc-v[data-ok="1"]{background:#e4f3ea;color:#14603a}
#tool-operator-compare .oc-v[data-ok="0"]{background:#fbe7e5;color:#8f2b25}
#tool-operator-compare .oc-v[data-ok="x"]{background:var(--color-surface);color:var(--color-muted)}
#tool-operator-compare .oc-cards{margin-top:20px}
#tool-operator-compare .oc-card{padding:16px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper)}
#tool-operator-compare .oc-card + .oc-card{margin-top:12px}
#tool-operator-compare .oc-name{margin:0;font-family:var(--font-display);font-size:19px;font-weight:700;line-height:1.2}
#tool-operator-compare .oc-why{margin:6px 0 0;font-size:14.5px;line-height:1.55;color:var(--color-muted)}
#tool-operator-compare .oc-rows{margin:12px 0 0;padding:0;list-style:none}
#tool-operator-compare .oc-rows > li{padding:10px 0;border-top:1px solid var(--color-rule)}
#tool-operator-compare .oc-k{margin:0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--color-muted)}
#tool-operator-compare .oc-val{margin:4px 0 0;font-size:15.5px;font-weight:600;line-height:1.35}
#tool-operator-compare .oc-det{margin:4px 0 0;font-size:14.5px;line-height:1.55}
#tool-operator-compare .oc-src{margin:12px 0 0;padding-top:10px;border-top:1px solid var(--color-rule);font-size:12.5px;line-height:1.5;color:var(--color-muted)}
#tool-operator-compare .oc-src a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
#tool-operator-compare .oc-src p{margin:0}
#tool-operator-compare .oc-src p + p{margin-top:4px}
#tool-operator-compare .oc-empty{margin-top:18px;padding:16px;border:1px dashed var(--color-rule);border-radius:10px;font-size:15px;line-height:1.6;background:var(--color-paper)}
#tool-operator-compare .oc-foot{margin:14px 0 0;font-family:var(--font-mono);font-size:10.5px;letter-spacing:.05em;text-transform:uppercase;color:var(--color-muted);line-height:1.6}

/* Абзац в пустом ответе: без внешних отступов, рамку даёт .oc-empty.
 * Раньше стоял атрибутом style="margin:0". */
.oc-empty .oc-flat { margin: 0; }

/* На телефоне сводная таблица не нужна: под ней уже лежат карточки по
   каждому оператору, и в них те же поля плюс пояснение к каждому. До
   правки телефон получал 600 px таблицы в 306 px экрана — прокрутку
   вбок, обрезанный край и дубль того, что ниже написано подробнее.
   Сравнивать по колонке на 390 px всё равно нельзя. Поймано 27.07.2026
   обходом прода. */
@media (max-width:640px){
  #tool-operator-compare .oc-scroll,
  #tool-operator-compare .oc-hint{display:none}
  #tool-operator-compare .oc-cards{margin-top:14px}
}