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

#tool-device-check .dc-lead{margin:0 0 14px;font-size:15px;line-height:1.55;color:var(--color-muted)}
#tool-device-check .dc-field{position:relative}
#tool-device-check .dc-list{position:absolute;z-index:30;left:0;right:0;top:calc(100% + 4px);margin:0;padding:4px;list-style:none;background:var(--color-paper);border:1px solid var(--color-rule);border-radius:10px;box-shadow:0 10px 30px rgba(20,22,26,.12);max-height:280px;overflow:auto}
#tool-device-check .dc-list li{margin:0;padding:0}
#tool-device-check .dc-opt{display:flex;gap:8px;align-items:baseline;width:100%;text-align:left;background:none;color:var(--color-ink);margin:0;padding:8px 10px;border:0;border-radius:7px;font:inherit;font-size:15px;line-height:1.35;cursor:pointer}
#tool-device-check .dc-opt:hover,#tool-device-check .dc-opt[aria-selected="true"]{background:var(--color-surface)}
#tool-device-check .dc-opt b{font-weight:600;min-width:0;overflow-wrap:anywhere}
#tool-device-check .dc-opt span{font-size:12px;color:var(--color-muted);margin-left:auto;white-space:nowrap;font-family:var(--font-mono)}
#tool-device-check .dc-brands{display:flex;flex-wrap:wrap;gap:6px;margin-top:12px}
#tool-device-check .dc-brand{margin:0;padding:5px 11px;border:1px solid var(--color-rule);background:var(--color-paper);color:var(--color-muted);border-radius:999px;font:inherit;font-size:13px;font-weight:500;cursor:pointer}
#tool-device-check .dc-brand:hover{border-color:var(--color-accent);color:var(--color-accent)}
#tool-device-check .dc-card{margin-top:18px;padding:16px;border:1px solid var(--color-rule);border-radius:10px;background:var(--color-paper)}
#tool-device-check .dc-card[data-tone="ok"]{border-left:4px solid #1a7f4b}
#tool-device-check .dc-card[data-tone="bad"]{border-left:4px solid #b23b34}
#tool-device-check .dc-card[data-tone="warn"]{border-left:4px solid #b8770f}
#tool-device-check .dc-card[data-tone="unk"]{border-left:4px solid var(--color-muted)}
#tool-device-check .dc-badge{display:inline-block;font-family:var(--font-mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;font-weight:600;padding:4px 9px;border-radius:999px}
#tool-device-check .dc-card[data-tone="ok"] .dc-badge{background:#e4f3ea;color:#14603a}
#tool-device-check .dc-card[data-tone="bad"] .dc-badge{background:#fbe7e5;color:#8f2b25}
#tool-device-check .dc-card[data-tone="warn"] .dc-badge{background:#fbf0dc;color:#7d5209}
#tool-device-check .dc-card[data-tone="unk"] .dc-badge{background:var(--color-surface);color:var(--color-muted)}
#tool-device-check .dc-name{margin:10px 0 0;font-family:var(--font-display);font-size:20px;font-weight:700;line-height:1.2;overflow-wrap:anywhere}
#tool-device-check .dc-year{margin:3px 0 0;font-family:var(--font-mono);font-size:12px;color:var(--color-muted)}
#tool-device-check .dc-text{margin:10px 0 0;font-size:15.5px;line-height:1.6}
#tool-device-check .dc-sub{margin:14px 0 0;padding-top:12px;border-top:1px solid var(--color-rule)}
#tool-device-check .dc-h{margin:0 0 6px;font-family:var(--font-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--color-muted)}
#tool-device-check .dc-notes{margin:0;padding:0;list-style:none}
#tool-device-check .dc-notes li{position:relative;padding-left:16px;font-size:14.5px;line-height:1.55}
#tool-device-check .dc-notes li + li{margin-top:7px}
#tool-device-check .dc-notes li:before{content:"";position:absolute;left:2px;top:.62em;width:5px;height:5px;border-radius:50%;background:var(--color-accent)}
#tool-device-check .dc-src{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.5}
#tool-device-check .dc-src li + li{margin-top:6px}
#tool-device-check .dc-src a{color:var(--color-accent);text-decoration:underline;text-underline-offset:2px;overflow-wrap:anywhere}
#tool-device-check .dc-src em{font-style:normal;color:var(--color-muted);font-family:var(--font-mono);font-size:11px;white-space:nowrap}
#tool-device-check .dc-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-device-check .dc-empty p{margin:0}
#tool-device-check .dc-empty p + p{margin-top:10px}
#tool-device-check code{font-family:var(--font-mono);background:var(--color-surface);border-radius:4px;padding:1px 5px;font-size:.9em}
#tool-device-check .dc-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}

/* Первый абзац подблока идёт сразу под заголовком.
 * Раньше стоял атрибутом style="margin-top:0". */
.dc-tight { margin-top: 0; }