/* treeTiles.css — стили плиток/подписей/бейджей дерева (treemap).
   Выделено из style.css: файл общий для приложения (AssetLoader) и публичного
   демо /try-sensim (demo.html подключает напрямую), чтобы демо-дерево
   выглядело идентично боевому без подгрузки всего style.css.
   Синхронность .depth-N ↔ GLASS_STOPS (treeRenderer.js) ↔ публичный шаблон
   (Backend/dashboard/shared_tree_template.py) контролирует
   Frontend/tests/test_shared_tree_style.py. */

.node-rect {
    stroke: rgba(255,255,255,.85); stroke-width: 1.5px; cursor: pointer;
    /* Плитки лежат прямо на фоне (не «плавают»): без теней в покое,
       подъём только для листьев при hover/selected (класс .lifted ставит
       рендерер). Сдвиг — CSS-свойством translate (не transform), чтобы он
       складывался с transform-атрибутом SVG у бейдж-групп. Синей рамки
       при наведении нет — только свечение-тень. */
    transition: translate .16s var(--ease-out, ease), filter .16s var(--ease-out, ease), stroke .15s;
}
.node-rect.lifted {
    translate: 0 -3px;
    filter: brightness(1.04) drop-shadow(0 8px 14px rgba(13,45,110,.22));
}
/* Лейбл и таблички листа (тикеты/актуальность/бейджи) поднимаются вместе
   с плиткой — рендерер помечает их тем же data-uid и классом .lifted. */
.node-label, .ticket-count-group, .top-badge-group, .dev-badge-group, .processed-badge-group,
.agg-plaque-group {
    transition: translate .16s var(--ease-out, ease);
}
.node-label.lifted, .ticket-count-group.lifted, .top-badge-group.lifted,
.dev-badge-group.lifted, .processed-badge-group.lifted, .agg-plaque-group.lifted {
    translate: 0 -3px;
}
/* Табличка узла-агрегатора (граница глубины, тикеты потомков подняты):
   стеклянная плашка с линиями таблицы, фоновая пометка под подписью узла. */
.agg-plaque-group { pointer-events: none; opacity: .8; }
.agg-plaque-bg {
    fill: rgba(255,255,255,.30);
    stroke: rgba(255,255,255,.85);
    stroke-width: 1.2px;
}
.agg-plaque-line { stroke: rgba(255,255,255,.9); stroke-width: 1.1px; }
.agg-plaque-line-soft { stroke: rgba(255,255,255,.55); }
.node-rect.selected {
    stroke: #1565d8 !important; stroke-width: 3px !important;
    filter: brightness(1.02) drop-shadow(0 0 7px rgba(21,101,216,.40)) drop-shadow(0 7px 16px rgba(13,45,110,.18));
}
/* Выделение текущего предложения оранжевой рамкой */
.suggestion-highlight {
    stroke: #ff8c00 !important;
    stroke-width: 3px !important;
}
.node-label { font-size: 13px; font-weight: 500; fill: #12233f; pointer-events: none; text-shadow: 0 1px 3px rgba(255,255,255,.9), 0 0 8px rgba(255,255,255,.55); user-select: none; }
/* Бейджи/пилюли поверх плиток не перехватывают курсор — иначе hover
   «моргал» бы при пересечении бейджа (подъём управляется с rect[data-uid]). */
.dev-badge-group, .processed-badge-group, .top-badge-group, .ticket-count-group { pointer-events: none; }
/* Прозрачные плитки с тонировкой по глубине (фон виден сквозь заливку без
   размытия): root 0%, дальше тонировка плотнее и насыщеннее с каждым
   уровнем (небо → фирменный синий); глубина читается и по краям —
   per-depth stroke темнеет с уровнем. Градиенты инжектит рендерер. */
.depth-0 { fill: rgba(255,255,255,0); fill: url(#g-depth-0); stroke: rgba(255,255,255,.55); }
.depth-1 { fill: rgba(219,233,252,.20); fill: url(#g-depth-1); stroke: rgba(199,217,247,.95); }
.depth-2 { fill: rgba(194,214,249,.34); fill: url(#g-depth-2); stroke: rgba(177,202,243,1); }
.depth-3 { fill: rgba(165,194,246,.48); fill: url(#g-depth-3); stroke: rgba(155,187,239,1); }
.depth-4 { fill: rgba(135,171,242,.60); fill: url(#g-depth-4); stroke: rgba(133,172,235,1); }
.depth-5 { fill: rgba(108,151,236,.70); fill: url(#g-depth-5); stroke: rgba(111,157,231,1); }
.depth-default { fill: rgba(90,133,228,.78); fill: url(#g-depth-default); stroke: rgba(93,145,227,1); }

/* Тёмная тема: подписи/обводки плиток (голубое стекло плиток — общее
   в обеих темах, меняются только читаемость подписи и кромка). */
[data-theme="dark"] .node-label {
    fill: #e8efff;
    text-shadow: 0 1px 3px rgba(2, 6, 18, .9), 0 0 8px rgba(2, 6, 18, .55);
}
[data-theme="dark"] .node-rect { stroke: rgba(255, 255, 255, .38); }
[data-theme="dark"] .node-rect.lifted {
    filter: brightness(1.08) drop-shadow(0 8px 14px rgba(2, 6, 18, .5));
}

/* Вуаль зум-анимации переходов по дереву (вход в узел / выход наверх):
   единый стеклянный прямоугольник для обоих направлений (treeRenderer
   ._playZoom). Стекло на канале --glass-tint: фон страницы сквозь него
   виден, деревья за ним — нет (слои вырезаются evenodd-клипом). Геометрия
   и прозрачность анимируются из JS (rAF), здесь — только статика. */
.tree-zoom-veil {
    position: absolute; z-index: 2; pointer-events: none;
    background: rgb(var(--glass-tint) / .55);
    backdrop-filter: blur(14px) saturate(160%);
    -webkit-backdrop-filter: blur(14px) saturate(160%);
    border: 1px solid rgb(var(--glass-tint) / .65);
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(10, 22, 44, .30),
                inset 0 1px 0 rgb(var(--glass-tint) / .50);
}

/* Бейдж "обработано" — стеклянная пилюля (мятное стекло) */
.processed-badge {
    fill: #047857;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}
.processed-badge-bg {
    fill: rgba(209, 250, 229, .55);
    stroke: rgba(5, 150, 105, .50);
    stroke-width: 1px;
    rx: 9;
    ry: 9;
}

/* Бейдж "в разработке" — стеклянная пилюля (янтарное стекло, в тон авроры) */
.dev-badge {
    fill: #b45309;
    font-size: 10px;
    font-weight: 700;
    pointer-events: none;
    user-select: none;
}
.dev-badge-bg {
    fill: rgba(254, 243, 199, .60);
    stroke: rgba(217, 119, 6, .55);
    stroke-width: 1px;
    rx: 9;
    ry: 9;
}
/* Бейджи-пилюли слегка приподняты над плиткой */
.top-badge-group, .dev-badge-group, .processed-badge-group, .ticket-count-group {
    filter: drop-shadow(0 1px 2px rgba(13,45,110,.14));
}
/* Подпись «N тик. | rel» — стеклянная пилюля */
.ticket-count-bg {
    fill: rgb(var(--glass-tint) / .52);
    stroke: rgb(var(--glass-tint) / .75);
    stroke-width: 1px;
}
.ticket-count-label,
.ticket-count-group,
.top-badge-group,
.dev-badge-group,
.processed-badge-group,
.dev-badge-bg {
    pointer-events: none;
    user-select: none;
}