/* =============================================================================
   Показатели ИТ-отрасли – адаптивная версия дашборда.
   Палитра и характер интерфейса взяты из макета 1920×1080, но раскладка
   построена на потоке, сетках и относительных единицах: ни жёсткого холста,
   ни transform: scale() на всю страницу.
   ========================================================================== */

:root{
  /* поверхности */
  --bg:#0b111b;
  --bg-2:#111822;
  --surface:rgba(255,255,255,.05);
  --surface-2:rgba(255,255,255,.035);
  --surface-hi:rgba(120,175,255,.10);
  --brd:#324160;
  --brd-soft:rgba(255,255,255,.07);
  --thead:#26344f;

  /* текст */
  --txt:#fff;
  --txt-dim:#7e8ca4;
  --txt-mute:#8391a8;
  --txt-field:#8b93a3;

  /* акценты */
  --accent:#3b5381;
  --accent-lit:#5d7dcb;
  --green:#45ae8d;
  --red:#ae575f;
  --neutral:#263450;
  --yellow:#e2ca48;

  /* типографика – плавная, без ступеней */
  --fs-h1:clamp(20px, 1.05rem + 1.15vw, 42px);
  --fs-h2:clamp(17px, .95rem + .5vw, 26px);
  --fs-big:clamp(30px, 1.4rem + 2.2vw, 60px);
  --fs-base:clamp(14px, .82rem + .22vw, 17px);
  --fs-sm:clamp(12px, .74rem + .12vw, 15px);
  --fs-xs:clamp(11px, .7rem + .08vw, 13px);

  /* ритм */
  --gap:clamp(10px, .5rem + .5vw, 18px);
  --pad:clamp(14px, .6rem + 1.1vw, 28px);
  --radius:clamp(10px, .5rem + .35vw, 16px);
  --radius-sm:9px;
  --hdr-h:clamp(56px, 3.2rem + 1.2vw, 84px);

  /* движение */
  --e-out:cubic-bezier(.22,.9,.28,1);
  --e-in-out:cubic-bezier(.65,0,.35,1);
  --t-fast:.16s;
  --t:.28s;
  --t-slow:.5s;
}

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body,h1,h2,h3,p,figure{margin:0}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
[hidden]{display:none !important}

body{
  min-height:100dvh;
  display:flex;flex-direction:column;
  background:var(--bg);
  color:var(--txt);
  font-family:'Inter',-apple-system,'Segoe UI',Roboto,Arial,sans-serif;
  font-size:var(--fs-base);
  line-height:1.35;
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  overflow-x:hidden;
}

.sprite{position:absolute;width:0;height:0;overflow:hidden}
.ic{width:1em;height:1em;display:block;flex:0 0 auto}

.skiplink{
  position:fixed;left:12px;top:-100px;z-index:100;
  padding:10px 16px;border-radius:10px;
  background:var(--accent);color:#fff;text-decoration:none;
  transition:top var(--t) var(--e-out);
}
.skiplink:focus-visible{top:12px}
:focus-visible{outline:2px solid var(--accent-lit);outline-offset:3px;border-radius:6px}

.wrap{
  width:100%;max-width:1920px;margin-inline:auto;
  padding-inline:clamp(14px, 1rem + 1.2vw, 41px);
}
.live{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}

/* ============================ ФОН ============================ */
/* bg.webp – восстановленная графика макета (3840×2160, ровно 2× от 1920×1080).
   Никаких дополнительных слоёв: сетка в правом верхнем углу и свечение уже
   внутри картинки, и любой оверлей поверх ломает исходную композицию.
   cover + center на пропорциях 16:9 даёт кадр один в один с макетом. */
.bg{position:fixed;inset:0;z-index:-1;overflow:hidden;background:var(--bg-2)}
.bg__img{
  position:absolute;inset:0;
  background:url(bg.webp) center center / cover no-repeat;
}
/* На вытянутых экранах cover сильно увеличивает картинку и срезает края –
   там гасим низ, чтобы обрез не читался как случайный. На пропорциях, близких
   к макетным, никакого оверлея нет: кадр остаётся один в один. */
@media (max-aspect-ratio: 4/3){
  .bg__img::after{
    content:'';position:absolute;inset:0;
    background:linear-gradient(180deg,rgba(11,17,27,0) 45%,rgba(11,17,27,.6) 100%);
  }
}

/* ============================ ШАПКА ============================ */
.hdr{
  position:sticky;top:0;z-index:40;
  background:linear-gradient(180deg,rgba(11,17,27,.92),rgba(11,17,27,.72));
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid transparent;
  transition:border-color var(--t) var(--e-out),background var(--t) var(--e-out);
}
.hdr.is-stuck{border-bottom-color:var(--brd-soft);background:rgba(11,17,27,.94)}
.hdr__in{
  position:relative;min-height:var(--hdr-h);
  display:flex;align-items:center;gap:clamp(10px,1.4vw,26px);
  padding-block:clamp(8px,1vw,14px);
}
.hdr__title{
  font-size:var(--fs-h1);font-weight:700;letter-spacing:.005em;line-height:1.15;
  min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.hdr .hdr__filters{margin-left:auto;display:none}
.hdr__bar{
  position:absolute;left:0;bottom:-1px;height:2px;width:100%;
  transform:scaleX(0);transform-origin:0 50%;
  background:linear-gradient(90deg,var(--accent-lit),var(--green));
  transition:transform var(--t-slow) var(--e-out),opacity var(--t) linear;
  opacity:0;
}
.hdr__bar.is-on{opacity:1;transform:scaleX(.72)}
.hdr__bar.is-done{opacity:0;transform:scaleX(1)}

.chip{
  display:inline-flex;align-items:center;flex:0 0 auto;
  min-height:clamp(28px,1.6rem + .6vw,36px);
  padding:0 clamp(12px,1vw,24px);
  border-radius:999px;background:rgba(255,255,255,.055);
  font-size:var(--fs-sm);color:var(--txt-dim);white-space:nowrap;
  max-width:min(46vw,420px);overflow:hidden;text-overflow:ellipsis;
}
.chip--accent{background:rgba(93,125,203,.16);color:#c3d3f5}

.iconbtn{
  display:inline-flex;align-items:center;justify-content:center;gap:8px;
  min-width:clamp(34px,2rem + .5vw,40px);min-height:clamp(34px,2rem + .5vw,40px);
  padding:0 10px;border-radius:999px;
  background:var(--surface-hi);color:var(--txt-dim);font-size:var(--fs-sm);
  transition:background var(--t-fast) var(--e-out),color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.iconbtn .ic{font-size:clamp(14px,.8rem + .2vw,17px)}
.iconbtn:hover{background:rgba(120,175,255,.18);color:#fff}
.iconbtn:active{transform:scale(.94)}

/* ============================ ФИЛЬТРЫ ============================ */
.filterbar{
  position:sticky;top:var(--hdr-real,var(--hdr-h));z-index:35;
  background:linear-gradient(180deg,rgba(11,17,27,.86),rgba(11,17,27,.5));
  backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
}
.filterbar__in{
  display:flex;flex-wrap:wrap;gap:clamp(8px,.8vw,14px);
  padding-block:clamp(10px,1.1vw,18px);
}

.field{position:relative;flex:0 1 clamp(180px,18vw,262px);max-width:100%;min-width:0}
.field--year{flex:0 0 clamp(96px,8vw,122px)}
/* «Оперативные данные» – самая длинная подпись, ей нужен свой минимум */
.filterbar__in .field:first-child{flex:0 1 clamp(212px,20vw,262px)}

.field__btn{
  width:100%;min-height:clamp(42px,2.4rem + .8vw,50px);
  display:flex;align-items:center;gap:10px;
  padding:0 14px 0 clamp(12px,1vw,18px);
  border:1px solid var(--brd-soft);border-radius:11px;
  background:rgba(255,255,255,.02);
  color:var(--txt-field);font-size:var(--fs-base);text-align:left;
  transition:border-color var(--t-fast),background var(--t-fast),color var(--t-fast);
}
.field__btn:hover{background:rgba(255,255,255,.05);border-color:rgba(255,255,255,.14)}
.field__cap{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.field__cal{color:#5b6ea8;font-size:clamp(16px,1rem + .2vw,20px)}
.field__chev{
  color:#33476f;font-size:clamp(11px,.6rem + .2vw,14px);
  transition:transform var(--t) var(--e-out),color var(--t-fast);
}
.field.is-lit .field__btn{border-color:rgba(255,255,255,.18);color:#fff}
.field.is-lit .field__chev{color:var(--accent-lit)}
.field.is-open .field__btn{border-color:rgba(255,255,255,.42);color:#fff;background:rgba(255,255,255,.06)}
.field.is-open .field__chev{transform:rotate(180deg);color:var(--accent-lit)}

.menu{
  position:absolute;left:0;top:calc(100% + 4px);width:100%;z-index:5;
  max-height:min(46vh,300px);overflow:auto;overscroll-behavior:contain;
  padding:8px 0;border-radius:12px;
  background:rgba(38,52,82,.98);
  border:1px solid rgba(255,255,255,.09);
  box-shadow:0 18px 46px rgba(0,0,0,.5);
  transform-origin:top center;
}
.menu[hidden]{display:none}
.menu__opt{
  width:100%;display:flex;align-items:center;gap:10px;
  min-height:clamp(36px,2rem + .5vw,42px);padding:0 16px;
  color:#fff;font-size:var(--fs-base);text-align:left;
  transition:background var(--t-fast) linear;
}
.menu__opt:hover,.menu__opt.is-cursor{background:rgba(255,255,255,.08)}
.menu__opt .ic{
  margin-left:auto;font-size:14px;opacity:0;transform:scale(.7);
  transition:opacity var(--t-fast),transform var(--t-fast) var(--e-out);
}
.menu__opt[aria-selected="true"] .ic{opacity:1;transform:none}

/* ============================ ОБЩЕЕ ============================ */
main{flex:1 0 auto;padding-block:clamp(14px,1.6vw,26px) clamp(48px,6vw,96px)}
.view{display:flex;flex-direction:column;gap:clamp(14px,1.6vw,26px)}

.note{
  padding:var(--pad);border-radius:var(--radius);
  background:var(--surface-2);border:1px solid var(--brd-soft);color:var(--txt-mute);
}

.badge{
  display:inline-flex;align-items:center;justify-content:center;
  min-height:clamp(24px,1.3rem + .5vw,32px);
  padding:0 clamp(9px,.7vw,14px);
  border-radius:999px;
  font-size:var(--fs-sm);color:#fff;white-space:nowrap;
  background:var(--neutral);
}
.badge.g{background:var(--green)}
.badge.r{background:var(--red)}
.badge.n{background:var(--neutral)}

/* ============================ ГЛАВНАЯ ТАБЛИЦА ============================ */
.tbl{--cols:54px 42px minmax(220px,1fr) 178px 128px 128px 118px}

.hint{
  display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  margin-bottom:2px;font-size:var(--fs-sm);color:var(--txt-dim);
}
.hint b{font-weight:400;color:#cfd8ea}
.hint__key{
  display:inline-grid;place-items:center;width:20px;height:20px;border-radius:50%;
  background:var(--surface-hi);color:#9fb4dd;font-size:11px;
}

.tbl__head{
  display:grid;grid-template-columns:var(--cols);align-items:center;
  gap:clamp(6px,.6vw,12px);
  min-height:56px;padding-inline:clamp(10px,1vw,18px);
  border-radius:var(--radius-sm);background:var(--thead);
  font-size:var(--fs-sm);color:var(--txt-dim);
}
.tbl__head .t-num{text-align:left;font-size:var(--fs-sm)}
.tbl__head .t-name{font-size:var(--fs-sm);font-weight:400;color:rgba(255,255,255,.55)}
.tbl__body{display:flex;flex-direction:column;gap:4px;margin-top:4px}

.trow{
  position:relative;width:100%;
  display:grid;grid-template-columns:var(--cols);align-items:center;
  gap:clamp(6px,.6vw,12px);
  min-height:clamp(74px,4rem + 2.6vw,108px);
  padding-inline:clamp(10px,1vw,18px);
  border:1px solid var(--brd);border-radius:12px;
  background:var(--surface);text-align:left;
  transition:background var(--t-fast) var(--e-out),border-color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.trow--btn:hover{background:rgba(120,175,255,.09);border-color:#42568a;transform:translateY(-1px)}
.trow--btn:active{transform:translateY(0) scale(.997)}

.t-num{font-size:clamp(16px,.9rem + .5vw,24px);color:var(--txt-dim);text-align:center}
.t-ico{display:flex;align-items:center}
.t-mark{
  position:relative;
  width:clamp(28px,1.6rem + .6vw,36px);aspect-ratio:1;border-radius:50%;
  display:grid;place-items:center;
  background:var(--surface-hi);color:var(--txt-dim);
  font-size:clamp(12px,.7rem + .3vw,15px);
  transition:background var(--t-fast),color var(--t-fast),transform var(--t) var(--e-out);
}
.t-mark--warn{background:none}
.trow--btn:hover .t-mark{background:rgba(120,175,255,.2);color:#dce6ff;transform:translateX(2px)}

.t-name{font-size:clamp(15px,.85rem + .45vw,22px);font-weight:700;min-width:0}
.t-name .unit{font-weight:400;color:var(--txt-dim);font-size:.72em}

.t-per{min-width:0}
.t-per b{display:block;font-weight:400;font-size:var(--fs-base)}
.t-per span{display:block;font-size:var(--fs-sm);color:var(--txt-dim)}

.t-val{font-size:clamp(17px,.95rem + .6vw,28px);font-variant-numeric:tabular-nums;white-space:nowrap}
.t-figure{display:inline-flex;align-items:baseline}
.t-val .pc{font-size:.62em;color:var(--txt-dim);margin-left:.12em}
.t-lbl{display:none}
.t-nodetail{display:none}

/* подсказка «показатель без детализации» */
.tip{
  position:absolute;left:50%;top:calc(100% + 9px);z-index:20;
  transform:translate(-50%,4px);
  padding:8px 14px;border-radius:10px;white-space:nowrap;
  background:#2c3a5c;color:#fff;font-size:var(--fs-sm);
  box-shadow:0 12px 30px rgba(0,0,0,.45);
  opacity:0;pointer-events:none;
  transition:opacity var(--t-fast) linear,transform var(--t-fast) var(--e-out);
}
.tip::before{
  content:'';position:absolute;left:50%;top:-5px;
  width:11px;height:11px;background:#2c3a5c;
  transform:translateX(-50%) rotate(45deg);
}
.t-mark--warn:hover .tip,.t-mark--warn:focus-visible .tip{opacity:1;transform:translate(-50%,0)}

/* ============================ ДЕТАЛИЗАЦИЯ ============================ */
.detail{
  display:grid;grid-template-columns:minmax(0,1fr) clamp(280px,22vw,420px);
  gap:clamp(14px,1.6vw,26px);align-items:start;
}
.detail__main{display:flex;flex-direction:column;gap:clamp(12px,1.4vw,22px);min-width:0}

.kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,260px),1fr));gap:clamp(10px,1vw,18px)}
.kpi{
  position:relative;overflow:hidden;
  display:flex;flex-direction:column;justify-content:space-between;gap:clamp(10px,1.2vw,22px);
  min-height:clamp(120px,7rem + 4vw,162px);
  padding:clamp(14px,1.2vw,26px) clamp(16px,1.4vw,30px);
  border:1px solid var(--brd-soft);border-radius:var(--radius);
  background:var(--surface-2);text-align:left;color:var(--txt-dim);
  transition:background var(--t) var(--e-out),border-color var(--t),color var(--t),transform var(--t-fast) var(--e-out);
}
.kpi:hover{background:rgba(255,255,255,.06);transform:translateY(-2px)}
.kpi[aria-pressed="true"]{
  background:linear-gradient(180deg,rgba(72,98,158,.34),rgba(43,60,100,.3));
  border-color:rgba(255,255,255,.5);color:#fff;
}
.kpi[aria-pressed="true"] .kpi__v{color:#fff}
.kpi__top{display:flex;align-items:flex-start;gap:12px}
.kpi__big{display:flex;align-items:baseline;gap:.4em;flex-wrap:wrap;min-width:0}
.kpi__v{font-size:var(--fs-big);line-height:1;color:#9aa6bb;font-variant-numeric:tabular-nums;transition:color var(--t)}
.kpi__u{font-size:clamp(14px,.8rem + .5vw,25px);color:inherit}
.kpi__badge{margin-left:auto}
.kpi__foot{display:flex;justify-content:space-between;gap:10px;font-size:var(--fs-sm);flex-wrap:wrap}

.tabsrow{display:flex;flex-wrap:wrap;gap:clamp(8px,.9vw,16px)}
.tabs{
  position:relative;display:flex;gap:2px;padding:4px;
  border:1px solid var(--brd-soft);border-radius:999px;
  background:rgba(255,255,255,.02);
  max-width:100%;overflow:auto;scrollbar-width:none;
}
.tabs::-webkit-scrollbar{display:none}
.tabs__ink{
  position:absolute;left:0;top:4px;bottom:4px;z-index:0;width:0;opacity:0;
  border-radius:999px;background:var(--accent);
  transition:transform var(--t) var(--e-out),width var(--t) var(--e-out),opacity var(--t-fast);
  will-change:transform,width;
}
.tab{
  position:relative;z-index:1;flex:0 0 auto;
  min-height:clamp(32px,1.8rem + .5vw,42px);padding:0 clamp(12px,1vw,20px);
  border-radius:999px;color:var(--txt-dim);font-size:var(--fs-base);white-space:nowrap;
  transition:color var(--t-fast) linear;
}
.tab:hover{color:#cfd8ea}
.tab[aria-selected="true"]{color:#fff}
.tab[disabled]{opacity:.38;cursor:not-allowed}

.tablehost{display:block}
.dtbl{--dcols:52px minmax(180px,1fr) 118px 118px 128px}
.dtbl--wide{--dcols:52px minmax(220px,1fr) 132px 132px 132px}

.dtbl__head{
  display:grid;grid-template-columns:var(--dcols);align-items:center;gap:clamp(6px,.6vw,12px);
  min-height:52px;padding-inline:clamp(10px,1vw,18px);
  border-radius:var(--radius-sm);background:var(--thead);
  font-size:var(--fs-sm);color:var(--txt-dim);
}
.dtbl__head .d-num{text-align:left}
.dtbl__head .d-val{font-size:var(--fs-sm);color:var(--txt-dim)}
.dtbl__body{display:flex;flex-direction:column;gap:4px;margin-top:4px}

.dsort{display:inline-flex;align-items:center;gap:7px;color:inherit;font-size:inherit}
.dsort .ic{font-size:13px;transition:transform var(--t) var(--e-out),color var(--t-fast)}
.dsort:hover{color:#cfd8ea}
.dsort[aria-sort="ascending"] .ic{transform:rotate(180deg)}
.dsort[aria-sort="ascending"] .ic,.dsort[aria-sort="descending"] .ic{color:var(--accent-lit)}

.drow{
  position:relative;overflow:hidden;
  display:grid;grid-template-columns:var(--dcols);align-items:center;gap:clamp(6px,.6vw,12px);
  min-height:clamp(56px,3rem + 1.6vw,74px);
  padding-inline:clamp(10px,1vw,18px);
  border:1px solid var(--brd);border-radius:12px;background:var(--surface);
  transition:background var(--t-fast),border-color var(--t-fast);
}
.drow:hover{background:rgba(255,255,255,.075)}
.drow--rf{border-color:rgba(226,202,72,.55);background:rgba(226,202,72,.05)}
.drow--rf .d-name,.drow--rf .d-val{color:var(--yellow)}
.drow--ell{min-height:clamp(34px,2rem + .6vw,46px);opacity:.75;grid-template-columns:52px minmax(0,1fr)}
.d-num{color:var(--txt-dim);text-align:center;font-size:clamp(14px,.8rem + .35vw,20px)}
.d-name{min-width:0;font-size:var(--fs-base);overflow-wrap:anywhere}
.d-val{font-size:clamp(16px,.9rem + .5vw,24px);font-variant-numeric:tabular-nums;white-space:nowrap}
.d-ell{letter-spacing:-.045em;color:#fff}

/* доля значения внутри столбца – тонкая полоска по нижней кромке строки */
.d-bar{
  position:absolute;left:0;bottom:0;height:2px;border-radius:0 2px 2px 0;
  background:linear-gradient(90deg,rgba(93,125,203,.9),rgba(69,174,141,.9));
  width:0;transition:width var(--t-slow) var(--e-out);
}

.tree{position:sticky;top:calc(var(--hdr-real,var(--hdr-h)) + 84px);display:flex;flex-direction:column;gap:10px}
.tree__root{
  padding:clamp(12px,1vw,18px) clamp(14px,1.1vw,22px);
  border:1px solid var(--brd-soft);border-radius:14px;
  background:var(--surface-2);color:var(--txt-dim);
  font-size:clamp(14px,.8rem + .35vw,20px);font-weight:700;text-align:left;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast);
}
.tree__root:hover{background:rgba(255,255,255,.06);color:#fff}
.tree__root[aria-current="true"]{
  background:linear-gradient(180deg,rgba(72,98,158,.34),rgba(43,60,100,.3));
  border-color:rgba(255,255,255,.5);color:#fff;
}
.tree__kids{display:flex;flex-direction:column;gap:8px;padding-left:clamp(12px,1.2vw,26px);position:relative}
.tree__kids::before{content:'';position:absolute;left:0;top:-6px;bottom:26px;width:1px;background:var(--brd)}
.tree__kid{
  position:relative;
  padding:clamp(9px,.8vw,14px) clamp(12px,1vw,18px);
  border:1px solid var(--brd-soft);border-radius:12px;
  background:var(--surface-2);color:#cfd8ea;font-size:var(--fs-sm);text-align:left;
  transition:background var(--t-fast),border-color var(--t-fast),color var(--t-fast),transform var(--t-fast) var(--e-out);
}
.tree__kid::before{
  content:'';position:absolute;left:calc(-1 * clamp(12px,1.2vw,26px));top:50%;
  width:clamp(8px,1vw,18px);height:1px;background:var(--brd);
}
.tree__kid:hover{background:rgba(255,255,255,.07);transform:translateX(2px)}
.tree__kid[aria-current="true"]{
  background:linear-gradient(180deg,rgba(72,98,158,.34),rgba(43,60,100,.3));
  border-color:rgba(255,255,255,.5);color:#fff;
}
.tree__kid[data-nodata="1"]{opacity:.5}

/* ============================ ПУСТО / СКЕЛЕТ ============================ */
.empty{
  display:flex;flex-direction:column;align-items:center;gap:12px;
  padding:clamp(26px,3.4vw,52px) var(--pad);
  border:1px dashed var(--brd);border-radius:var(--radius);
  background:var(--surface-2);text-align:center;
}
.empty .ic{font-size:clamp(34px,3vw,48px);color:#43547a}
.empty__t{font-size:var(--fs-h2);font-weight:700}

.skel{border-radius:12px;background:var(--surface-2);position:relative;overflow:hidden}
.skel::after{
  content:'';position:absolute;inset:0;
  background:linear-gradient(90deg,transparent,rgba(255,255,255,.07),transparent);
  transform:translateX(-100%);
  animation:shimmer 1.25s var(--e-in-out) infinite;
}
@keyframes shimmer{to{transform:translateX(100%)}}
.skel--row{height:clamp(74px,4rem + 2.6vw,108px)}
.skel--head{height:56px;border-radius:var(--radius-sm)}
.skel--kpi{height:clamp(120px,7rem + 4vw,162px);border-radius:var(--radius)}

/* ============================ АНИМАЦИИ ============================ */
@keyframes rise{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
@keyframes pop{from{opacity:0;transform:scale(.9)}to{opacity:1;transform:none}}
@keyframes menuIn{from{opacity:0;transform:translateY(-6px) scaleY(.94)}to{opacity:1;transform:none}}
@keyframes fadeIn{from{opacity:0}to{opacity:1}}

.anim-rise{animation:rise .42s var(--e-out) both;animation-delay:calc(var(--i,0) * 45ms)}
.anim-pop{animation:pop .3s var(--e-out) both;animation-delay:calc(var(--i,0) * 45ms + 90ms)}
.menu:not([hidden]){animation:menuIn .18s var(--e-out) both}
.view{animation:fadeIn .3s linear both}

/* переходы между экранами, если браузер умеет View Transitions */
::view-transition-old(root){animation:fadeIn .18s linear reverse both}
::view-transition-new(root){animation:rise .34s var(--e-out) both}

/* ============================ АДАПТИВ ============================ */

/* детализация в один столбец: дерево уезжает под таблицу и разворачивается в ряд */
@media (max-width:1200px){
  .detail{grid-template-columns:minmax(0,1fr)}
  .tree{position:static}
  .tree__kids{flex-flow:row wrap;padding-left:0}
  .tree__kids::before{display:none}
  .tree__kid{flex:1 1 260px}
  .tree__kid::before{display:none}
}

@media (max-width:1060px){
  .tbl{--cols:44px 38px minmax(170px,1fr) 128px 100px 100px 100px}
  .dtbl{--dcols:44px minmax(150px,1fr) 96px 96px 104px}
  .dtbl--wide{--dcols:44px minmax(170px,1fr) 104px 104px 108px}
  .t-per b{font-size:var(--fs-sm)}
}

/* мобильный: строки таблиц становятся карточками */
@media (max-width:860px){
  .tbl__head,.dtbl__head{display:none}

  .trow{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      'num  dyn'
      'name name'
      'per  per'
      'va   vb';
    row-gap:10px;column-gap:10px;
    padding:14px 16px;min-height:0;align-items:start;
  }
  .t-num{grid-area:num;text-align:left;font-size:15px;align-self:center}
  .t-ico{display:none}
  .t-name{grid-area:name;font-size:17px}
  .t-per{grid-area:per;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
  .t-per b,.t-per span{display:inline}
  .t-dyn{grid-area:dyn;justify-self:end;align-self:center}
  .t-val--a{grid-area:va}
  .t-val--b{grid-area:vb}
  .t-val{
    display:flex;flex-direction:column;gap:2px;
    padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.045);
    font-size:20px;
  }
  .t-lbl{display:block;font-size:11px;color:var(--txt-dim);font-weight:400}

  .drow{
    grid-template-columns:minmax(0,1fr) minmax(0,1fr);
    grid-template-areas:
      'num  dyn'
      'name name'
      'va   vb';
    row-gap:9px;column-gap:10px;padding:13px 16px;min-height:0;align-items:start;
  }
  .d-num{grid-area:num;text-align:left;align-self:center}
  .d-name{grid-area:name}
  .d-dyn{grid-area:dyn;justify-self:end;align-self:center}
  .d-val--a{grid-area:va}
  .d-val--b{grid-area:vb}
  .d-val{
    display:flex;flex-direction:column;gap:2px;
    padding:8px 10px;border-radius:9px;background:rgba(255,255,255,.045);font-size:19px;
  }
  .drow--ell{grid-template-areas:none;grid-template-columns:1fr;justify-items:center;padding-block:8px}
  .drow--ell .d-num{display:none}

  .hdr .hdr__filters{display:inline-flex;order:2}
  /* шапка переносится: длинное имя показателя не обрезается многоточием */
  .hdr__in{flex-wrap:wrap;row-gap:8px;column-gap:10px}
  .hdr__back{order:0}
  .hdr__title{
    order:1;flex:1 1 auto;font-size:clamp(16px,.85rem + 1.7vw,26px);
    white-space:normal;overflow:hidden;text-overflow:clip;
    display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;
  }
  #pageChip{order:3;flex:1 1 100%;max-width:100%;justify-content:flex-start}
  .t-nodetail{
    display:inline-flex;align-items:center;margin-left:8px;
    padding:2px 8px;border-radius:999px;
    background:rgba(255,255,255,.06);color:var(--txt-dim);
    font-size:11px;font-weight:400;vertical-align:middle;
  }
  .filterbar{
    position:fixed;top:var(--hdr-real,var(--hdr-h));left:0;right:0;
    border-bottom:1px solid var(--brd-soft);
    background:rgba(11,17,27,.97);
    max-height:0;overflow:hidden;
    transition:max-height var(--t) var(--e-out);
  }
  .filterbar.is-open{max-height:70vh;overflow:auto}
  .filterbar__in{flex-direction:column}
  .field,.field--year{flex:1 1 auto;width:100%;max-width:none}
  .kpi__foot{font-size:var(--fs-xs)}
}

@media (max-width:520px){
  .hdr .hdr__filters span{display:none}
  .tabs{width:100%}
  .empty{padding-inline:16px}
}

/* ============================ ДОСТУПНОСТЬ ============================ */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{
    animation-duration:.001ms !important;animation-iteration-count:1 !important;
    transition-duration:.001ms !important;scroll-behavior:auto !important;
  }
}

@media (prefers-contrast:more){
  .trow,.drow{border-color:#6b7ea8}
  .chip,.badge{outline:1px solid rgba(255,255,255,.35)}
}

@media print{
  .hdr,.filterbar,.bg,.tree{display:none}
  body{background:#fff;color:#000}
  .trow,.drow{border-color:#999;background:none;break-inside:avoid}
}