/* Виджет топов (tops-widget.js): карточка с барами «роли / технологии / навыки».
   Один файл на дашборд и лендинг; страницы различаются только переменными
   --tw-* на самой карточке (или её родителе). Значения по умолчанию — в
   :where(), чтобы любое правило страницы их перекрывало независимо от порядка. */
:where(.tw) {
    --tw-bg: #fff;
    --tw-border: #E4E6F2;
    --tw-radius: 12px;
    --tw-pad: 18px 20px;
    --tw-gap: 16px;
    --tw-ink: #161A2E;
    --tw-ink-2: #565C7A;
    --tw-ink-3: #8A90A8;
    --tw-accent: #3343CC;
    --tw-down: #B5655E;
    --tw-track: #F6F7FC;
    --tw-fill: #C7CCE6;

    --tw-title-size: 14px;
    --tw-head-h: 100px;
    --tw-total-size: clamp(36px, 4vw, 52px);
    --tw-total-ls: -0.02em;
    --tw-total-lh: 1.1;
    --tw-totals-gap: 32px;
    --tw-label-w: 118px;
    --tw-sep: #E4E7EF;
    --tw-chips-gap: 0 14px;

    --tw-bars-min: 150px;
    --tw-bars-gap: 12px;
    --tw-bars-grow: 0;
    --tw-bars-justify: flex-start;
    --tw-bar-h: 12px;
    --tw-name-size: 13px;
    --tw-num-size: 15px;
    --tw-num-w: 76px;
    --tw-trend-size: 12px;
    --tw-trend-w: 54px;
    --tw-col-gap: 12px;

    --tw-more-size: 13px;
    --tw-more-accent: var(--tw-ink);
    --tw-note-size: 12px;
    --tw-notes-gap: 16px;
}

.tw {
    display: flex; flex-direction: column; gap: var(--tw-gap); min-width: 0; box-sizing: border-box;
    padding: var(--tw-pad); background: var(--tw-bg); color: var(--tw-ink);
    border: 1px solid var(--tw-border); border-radius: var(--tw-radius);
}
.tw *, .tw *::before, .tw *::after { box-sizing: border-box; }
.tw p { margin: 0; }
.tw-title { font-size: var(--tw-title-size); font-weight: 700; color: var(--tw-ink); }

/* верхний блок: фиксированная высота, чтобы бары трёх карточек в ряд совпадали */
.tw-head { box-sizing: border-box; height: var(--tw-head-h); overflow: hidden; padding-bottom: 12px; border-bottom: 1px solid var(--tw-sep); }
.tw-totals { display: flex; flex-wrap: wrap; align-items: flex-start; gap: var(--tw-totals-gap); }
.tw-total { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.tw-total .tw-title { min-height: 1.4em; }
.tw-big {
    font-size: var(--tw-total-size); font-weight: 800; letter-spacing: var(--tw-total-ls);
    line-height: var(--tw-total-lh); font-variant-numeric: tabular-nums;
}
.tw-new .tw-title, .tw-new .tw-big { color: var(--tw-accent); }
.tw-insights { display: flex; flex-direction: column; justify-content: center; gap: 10px; }
.tw-insight { display: flex; align-items: baseline; gap: 12px; min-width: 0; }
.tw-insight .tw-title { min-width: var(--tw-label-w); }
.tw-chips {
    display: flex; flex-wrap: wrap; gap: var(--tw-chips-gap);
    font-size: var(--tw-name-size); font-weight: 800; line-height: 1.15; font-variant-numeric: tabular-nums;
}
.tw-chips b { font-weight: 600; color: var(--tw-ink-2); }
.tw-chips-new { color: var(--tw-accent); }

.tw-bars {
    list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column;
    gap: var(--tw-bars-gap); min-height: var(--tw-bars-min); flex: var(--tw-bars-grow) 1 auto;
    justify-content: var(--tw-bars-justify); transition: opacity .2s;
    --tw-cols: minmax(0, 1fr) auto;
}
.tw.is-loading .tw-bars { opacity: .45; }
.tw-row { display: grid; grid-template-columns: var(--tw-cols); column-gap: var(--tw-col-gap); row-gap: 5px; align-items: center; }
.tw-name { grid-column: 1; grid-row: 1; font-size: var(--tw-name-size); font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tw-bars.has-trend .tw-name { margin-right: var(--tw-trend-w); }
.tw-track { grid-column: 1; grid-row: 2; height: var(--tw-bar-h); border-radius: 8px; background: var(--tw-track); overflow: hidden; }
.tw-fill { display: block; width: 0; height: 100%; border-radius: 8px; background: var(--tw-fill); transition: width .6s cubic-bezier(.22, .61, .36, 1); }
.tw-num {
    grid-column: -2; grid-row: 1 / span 2; min-width: var(--tw-num-w); text-align: right;
    font-size: var(--tw-num-size); font-weight: 800; font-variant-numeric: tabular-nums; letter-spacing: -0.01em;
}
.tw-trend {
    grid-column: 1; grid-row: 1; justify-self: end; display: inline-flex; align-items: center; justify-content: flex-end; gap: 3px;
    font-size: var(--tw-trend-size); font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap;
}
.tw-bars:not(.has-trend) .tw-trend { display: none; }
.tw-ico { width: 9px; height: 9px; flex: none; }
.tw-up { color: var(--tw-accent); }
.tw-dn { color: var(--tw-down); }
.tw-dn .tw-ico { transform: rotate(180deg); }
.tw-empty { font-size: var(--tw-note-size); color: var(--tw-ink-3); }

.tw-more { font-size: var(--tw-more-size); font-weight: 600; color: var(--tw-ink-2); }
.tw-more b { color: var(--tw-more-accent); font-weight: 800; }
.tw-notes { display: flex; flex-direction: column; gap: var(--tw-notes-gap); }
.tw-note { font-size: var(--tw-note-size); color: var(--tw-ink-3); line-height: 1.45; }

@media (prefers-reduced-motion: reduce) {
    .tw-fill, .tw-bars { transition: none; }
}