/* Оформление стартовой страницы ORDcod.
 * Кладётся в /opt/glance/assets/user.css, подключается в theme.custom-css-file.
 * Цвета берём из переменных темы (--bgh/--bgs/--bgl — фон), чтобы правка палитры
 * в glance.yml не ломала оформление.
 *
 * Правило: не переопределять внутренние отступы и размеры штатных виджетов.
 * Из-за такого переопределения погода при наведении меняла высоту и дёргала страницу.
 */

/* Фон студии: звёздное небо. Картинка как есть — без фильтров и без затемнения:
 * она сама по себе такая, как нужно. Слой отдельный только для того, чтобы
 * картинка не прокручивалась вместе со страницей. */
body {
    background-color: hsl(var(--bgh) var(--bgs) var(--bgl));
}

body::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-image: url("/assets/background-starry-sky.png");
    background-position: center center;
    background-repeat: no-repeat;
    background-size: cover;
    pointer-events: none;
}

/* Карточки: полупрозрачное стекло поверх неба. */
.widget {
    /* Отступы карточки: без них заголовок прилипает к верхней границе, а содержимое — к краям.
       Рост погоды при наведении давали переопределения шрифтов, а не отступы. */
    padding: 0.65rem 0.9rem 0.7rem;
    background: hsl(var(--bgh) var(--bgs) calc(var(--bgl) + 6%) / 0.72);
    border: 1px solid hsl(var(--bgh) var(--bgs) calc(var(--bgl) + 12%) / 0.7);
    border-radius: 14px;
    backdrop-filter: blur(10px);
}

/* Шапка и навигация — без своей подложки, чтобы небо оставалось видно. */
.header {
    background: transparent;
}

/* Логотип в шапке: на тёмном фоне серый знак теряется, слегка подсвечиваем. */
.logo img,
.logo svg {
    filter: brightness(1.9) saturate(0.85);
}

/* Закладки: иконки крупнее, цели наведения просторнее, без сдвигов вёрстки. */
/* Иконки закладок приходят плиткой из сервиса иконок: штатные 20px делают знак мелким,
 * вокруг плитки видно «гнездо». Даём 32px и скругление под плитку. */
/* У Glance свои правила размера иконки закладки; перекрываем все ограничения разом,
 * иначе ширина остаётся 22px и плитка читается как «гнездо». */
.bookmarks-icon,
.bookmarks-icon-container {
    width: 32px !important;
    min-width: 32px !important;
    max-width: 32px !important;
    height: 32px !important;
    min-height: 32px !important;
    max-height: 32px !important;
    flex: 0 0 32px;
}

.bookmarks-icon {
    border-radius: 9px;
}

/* Контейнер иконки держит padding 5px: знак 32px в нём съезжает в правый нижний угол.
 * Убираем отступ — плитка ровно по размеру слота. */
.bookmarks-icon-container {
    padding: 0 !important;
    box-sizing: border-box !important;
}

.bookmark-link {
    border-radius: 10px;
    transition: background-color 120ms ease-in-out;
}

.bookmark-link:hover {
    background: hsl(var(--bgh) var(--bgs) calc(var(--bgl) + 10%) / 0.7);
}

.bookmarks-group-title {
    font-weight: 600;
    letter-spacing: 0.02em;
}

/* Календарь: между стрелками Glance рисует номер месяца — он дублирует название,
   поэтому убираем. */
.widget-type-calendar .flex.gap-7.items-center .color-highlight {
    display: none;
}

/* Светлая тема: звёздное небо на ней не нужно — оставляем ровный фон. */
:root[data-scheme="light"] body::before {
    display: none;
}

/* Всё должно влезать на один экран без прокрутки: чуть плотнее типографика и сетка.
 * Размеры Glance заданы в rem, поэтому масштаб достаточно поменять в корне. */
html {
    font-size: 92%;
}

.widgets-column {
    gap: 0.45rem;
}

.widget {
    gap: 0.4rem;
}

/* Один экран без прокрутки: чем ниже окно, тем мельче масштаб.
 * Всё в Glance задано в rem, поэтому уменьшается целиком — и текст, и отступы. */
@media (max-height: 1010px) {
    html { font-size: 84%; }
}

@media (max-height: 920px) {
    html { font-size: 78%; }
}

@media (max-height: 840px) {
    html { font-size: 72%; }
}

@media (max-height: 760px) {
    html { font-size: 66%; }
}

/* Полоса прокрутки не показывается никогда: содержимое подгоняется масштабом выше. */
html,
body {
    scrollbar-width: none;
    -ms-overflow-style: none;
}

html::-webkit-scrollbar,
body::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* Доступность: миллисекунды не показываем. Замер идёт через публичный домен и Traefik,
 * поэтому числа больше похожи на шум, чем на состояние; остаётся значок и подсказка с кодом. */
.widget-type-monitor .flex.items-center.gap-12 > div:not([class]) {
    display: none;
}

.widget-type-monitor div:has(+ .monitor-site-status-icon-compact) {
    display: none;
}

/* «Доступность» — только индикатор состояния, без переходов: ссылки на те же сервисы
 * уже есть в «Сервисах студии», дублировать навигацию незачем. */
.widget-type-monitor a {
    pointer-events: none;
    cursor: default;
}

.widget-type-monitor a:hover {
    text-decoration: none;
}

/* «Курсы»: показываем название, а не биржевой код. В разметке две строки — код (USDRUB=X) и
 * подпись (Доллар). Код пользователю ничего не говорит, поэтому строка скрыта, а подпись
 * получает вид заголовка. Скрываем только внутри виджета курсов: тот же класс-ссылка
 * используется и в других местах. */
.widget-type-markets .min-width-0 > a.color-highlight {
    display: none;
}

.widget-type-markets .min-width-0 > div {
    font-size: 1.02rem;
    line-height: 1.3;
    color: var(--color-text-highlight);
}

/* «Релизы»: свежая выкладка сверху — обычная, следующие тем тусклее, чем ниже.
 * Признак строки релиза — иконка uptime.svg: она ставится только генератором релизов,
 * поэтому правило не задевает другие закладки той же формы. */
.widget-type-bookmarks li:has(.bookmarks-icon[src*="uptime.svg"]) {
    transition: opacity .15s ease;
    opacity: 1;
}

.widget-type-bookmarks li:has(.bookmarks-icon[src*="uptime.svg"]):nth-child(2) {
    opacity: .82;
}

.widget-type-bookmarks li:has(.bookmarks-icon[src*="uptime.svg"]):nth-child(3) {
    opacity: .64;
}

.widget-type-bookmarks li:has(.bookmarks-icon[src*="uptime.svg"]):nth-child(4) {
    opacity: .47;
}

.widget-type-bookmarks li:has(.bookmarks-icon[src*="uptime.svg"]):nth-child(5) {
    opacity: .32;
}

/* Строка релиза остаётся читаемой при наведении: тусклость — про давность, а не про запрет. */
.widget-type-bookmarks li:has(.bookmarks-icon[src*="uptime.svg"]):hover {
    opacity: 1;
}