/* Временная отладочная панель и экспериментальные настройки. */

/* Панель */
.debug-panel { position: fixed; z-index: 20; left: max(12px, env(safe-area-inset-left, 0px)); bottom: max(12px, env(safe-area-inset-bottom, 0px)); max-width: calc(100vw - 2 * max(12px, env(safe-area-inset-left, 0px))); padding: 4px; font-size: 14px; line-height: 1.3; color: var(--ink); background: color-mix(in srgb, var(--surface) 68%, transparent); -webkit-backdrop-filter: blur(12px) saturate(1.3); backdrop-filter: blur(12px) saturate(1.3); border: 1px solid color-mix(in srgb, var(--field-edge) 30%, transparent); border-radius: var(--radius-md); box-shadow: var(--pop-shadow); }
.debug-panel:not([open]) { border-radius: var(--radius-pill); }
.debug-panel summary { display: flex; align-items: center; gap: 6px; min-height: 28px; padding: 0 10px; font-weight: 600; list-style: none; cursor: pointer; border-radius: var(--radius-pill); }
.debug-panel summary::-webkit-details-marker { display: none; }
.debug-panel summary::before { content: ""; flex: none; border-block: 4px solid transparent; border-left: 6px solid currentColor; transition: rotate .15s ease; }
.debug-panel[open] summary::before { rotate: 90deg; }
.debug-panel label { display: flex; align-items: center; gap: 8px; min-height: 28px; padding: 2px 10px; cursor: pointer; border-radius: var(--radius-sm); }
.debug-panel input { flex: none; margin: 0; accent-color: var(--accent); }
@media (hover: hover) { .debug-panel label:hover { background: color-mix(in srgb, var(--accent-soft) 70%, transparent); } }
@media (pointer: coarse) { .debug-panel summary, .debug-panel label { min-height: 44px; } }

/* Размытый фон: один стиль для всех элементов с классом .glass, галочка включает его сразу везде. Цвет и плотность элемент задаёт переменными */
:root { --glass-blur: blur(10px) saturate(1.3); }
:root[data-exp~="blur"] .glass { background: color-mix(in srgb, var(--glass-tint, var(--surface)) var(--glass-alpha, 58%), transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); }

/* Размытое поле становится отдельным слоем и закрыло бы значок, который стоит в разметке раньше него */
:root[data-exp~="blur"] .search-ico { z-index: 1; }

/* Адрес и теги на плашке: на белом фоне их нужно обозначить рамкой */
:root[data-exp~="blur"] :is(.ip, .tag).glass { box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--field-edge) 35%, transparent); }
:root[data-exp~="blur"] .ip.glass { --muted: var(--ink); }
:is(.ip, .tag).glass { --glass-tint: var(--surface-2); }
.tag.hit.glass { --glass-tint: var(--accent-soft); --glass-alpha: 84%; }
.card.down :is(.ip, .tag).glass { --glass-tint: var(--surface); --glass-alpha: 62%; }
@media (hover: hover) and (scripting: enabled) { .ip.glass[data-copy-area]:hover { --glass-tint: var(--accent-soft); --glass-alpha: 78%; } }
.ip.glass[data-copy-area]:has(.done) { --glass-tint: var(--done); --glass-alpha: 88%; }

/* На панораме. У кнопок шапки цвет уже полупрозрачный, поэтому плотность 100%. При наведении правило .glass сильнее, чем фон :hover, поэтому цвет меняется переменной */
.examples a.glass { --glass-tint: var(--hero-edge); --glass-alpha: 72%; }
@media (hover: hover) { .examples a.glass:hover { --glass-tint: var(--hero-on); --glass-alpha: 92%; } }
:is(.top-tools, .top-avatar).glass { --glass-tint: var(--top-pill); --glass-alpha: 100%; }

/* Всплывающие слои: в них читают текст, поэтому фон плотнее */
.suggest.glass { --glass-tint: var(--pop-bg); --glass-alpha: 88%; }
.top-profile-menu.glass { --glass-tint: var(--pop-bg); --glass-alpha: 88%; }
.tip-body.glass { --glass-tint: var(--tip-bg); --glass-alpha: 88%; }
.joinhelp.glass { --glass-alpha: 88%; }
.filters-done.glass { --glass-alpha: 72%; }

/* Подпись «На телефоне» лежит на яркой части картинки. Подложка у неё есть только в этих двух случаях, поэтому условия повторяют site.css вместо класса .glass */
@media (max-width: 639px) { :root[data-exp~="blur"] .card:not(:has(.plat + .plat)) .plat-head:not(.only) { --muted: var(--ink); background: color-mix(in srgb, var(--card-bg) 70%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } }
@media (min-width: 1040px) { :root[data-exp~="blur"][data-view="grid"] .card:not(:has(.plat + .plat)) .plat-head:not(.only) { --muted: var(--ink); background: color-mix(in srgb, var(--card-bg) 70%, transparent); -webkit-backdrop-filter: var(--glass-blur); backdrop-filter: var(--glass-blur); } }

/* Картинка на всю плашку. Серый текст на ней теряется, поэтому внутри плашки он становится основным цветом */
:root[data-exp~="full-art"] .card { --muted: var(--ink); }
:root[data-exp~="full-art"] .card-art { display: block; z-index: -2; inset: 0; width: 100%; min-width: 0; max-width: none; height: 100%; border-radius: calc(var(--radius) - var(--edge-w)); -webkit-mask-image: none; mask-image: none; }
/* Вуаль цвета плашки: у картинки z-index ниже, иначе ::before окажется под ней */
:root[data-exp~="full-art"] .card::before { content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none; border-radius: calc(var(--radius) - var(--edge-w)); background: linear-gradient(100deg, color-mix(in srgb, var(--card-bg) 74%, transparent), color-mix(in srgb, var(--card-bg) 56%, transparent) 55%, color-mix(in srgb, var(--card-bg) 30%, transparent)); }
/* Вуаль тянет цвета к белому, насыщенность это возмещает. Выключенный сервер остаётся серым */
:root[data-exp~="full-art"] .card:not(.down) .card-art { filter: saturate(1.3); }
:root[data-exp~="full-art"] .card :is(h3 a, .slogan, .meta, .online > span, .plat-head:not(.only), .plat-meta) { text-shadow: 0 0 1px var(--card-bg), 0 0 3px var(--card-bg), 0 0 6px var(--card-bg), 0 0 12px var(--card-bg), 0 0 20px var(--card-bg); }
/* Картинка как есть: без вуали и без возмещения её цветов. Серый цвет выключенного сервера остаётся, пропадает только бледность */
:root[data-exp~="full-art"][data-exp~="solid-art"] .card::before { display: none; }
:root[data-exp~="full-art"][data-exp~="solid-art"] .card:not(.down) .card-art { filter: none; }
:root[data-exp~="full-art"][data-exp~="solid-art"] .card.down .card-art { opacity: 1; }
/* Селектор как у самого сильного правила с отступом в site.css, файл подключён позже */
:root[data-exp~="full-art"] .card:has(.card-art:not(.pano)) .slogan { padding-right: 0; }