/* OneMetric AI — веб-версия примера отчёта (страница-бонус после квиза).
   Стили презентации scoped под .exrep, чтобы НЕ конфликтовать с app.css.
   Коллизии с сайтом: .brand .card .tag .gauge — нейтрализованы ниже. */

/* ——— токены презентации (только внутри .exrep) ——— */
.exrep{
  /* палитра наследуется из :root (app.css) — дублировать не нужно; тут только то, чего там нет */
  --red:#F2554D; --red-line:rgba(242,85,77,.42);
  /* --sans/--mono наследуются из :root (app.css) — единый стек для всех страниц */
  font-family:var(--sans); color:var(--ink); font-size:0.875rem; line-height:1.6;
  max-width:880px; margin:0 auto; padding:0 16px;
}
.exrep *{ box-sizing:border-box; }

/* удалён мёртвый CSS: .page/.page::before, .brand/.g/.phead/.phead .tag/.pfoot,
   .divider (контейнер)/__no/__ey/__t/__rule/__sub — в разметке example.html не используются (остаток PDF-макета). */

/* ——— слайд-разделитель: используется только .divider__who ——— */
.exrep .divider__who{ display:inline-block; margin-top:26px; font-family:var(--mono); font-size:0.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--teal2); border:1px solid var(--teal); background:rgba(30,217,163,.14); border-radius:40px; padding:7px 15px; }

/* ——— карточка (защита от app.css .card / ::after / :hover) ——— */
.exrep .card{
  position:relative; overflow:visible; border:1px solid var(--line); border-radius:14px;
  background:#14161f; padding:16px 18px; margin-bottom:13px;
  backdrop-filter:none; -webkit-backdrop-filter:none; box-shadow:none; transition:none;
}
.exrep .card::after{ content:none; display:none; }
.exrep .card:hover{ transform:none; box-shadow:none; }
.exrep .card__h{ display:flex; align-items:center; gap:9px; margin-bottom:10px; flex-wrap:wrap; }
.exrep .ic{ width:26px; height:26px; flex:none; border-radius:7px; display:grid; place-items:center; border:1px solid var(--line); margin:0; background:none; }
.exrep .ic svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; }
.exrep .ic--ok{ color:var(--teal2); border-color:var(--tline); background:rgba(30,217,163,.08); }
.exrep .ic--risk{ color:var(--warn); border-color:var(--warn-line); background:rgba(224,168,87,.08); }
.exrep .ic--do{ color:var(--violet); border-color:rgba(124,92,252,.4); background:rgba(124,92,252,.08); }
.exrep .ic--sum{ color:var(--ts); }
.exrep .cap{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ts); }
.exrep .card__b{ font-size:0.875rem; color:var(--ts); line-height:1.6; }
.exrep .card__b b{ color:var(--ink); font-weight:700; }
.exrep .num{ font-family:var(--mono); color:var(--teal); font-weight:700; white-space:nowrap; }
.exrep .money{ font-family:var(--mono); color:var(--teal); font-weight:700; white-space:nowrap; }

/* ——— списки рисков / успехов ——— */
.exrep .rlist{ list-style:none; display:flex; flex-direction:column; gap:9px; }
.exrep .rlist li{ position:relative; padding-left:17px; font-size:0.875rem; color:var(--ts); line-height:1.55; }
.exrep .rlist li b{ color:var(--ink); font-weight:700; }
.exrep .rlist li::before{ content:""; position:absolute; left:2px; top:8px; width:6px; height:6px; border-radius:50%; }
.exrep .rlist--ok li::before{ background:var(--teal); }
.exrep .rlist--risk li::before{ background:var(--warn); }

/* ——— нумерованные рекомендации ——— */
.exrep .olist{ list-style:none; counter-reset:s; display:flex; flex-direction:column; gap:10px; }
.exrep .olist li{ counter-increment:s; position:relative; padding-left:30px; font-size:0.875rem; color:var(--ts); line-height:1.55; }
.exrep .olist li::before{ content:counter(s); position:absolute; left:0; top:0; width:21px; height:21px; border-radius:50%;
  display:grid; place-items:center; font-family:var(--mono); font-size:0.6875rem; font-weight:700; color:var(--teal);
  border:1px solid var(--tline); background:rgba(30,217,163,.08); }

/* ——— мини-карточки (кто отличился / кому помочь) ——— */
.exrep .mini{ display:grid; grid-template-columns:1fr 1fr; gap:11px; }
.exrep .mini__c{ display:flex; gap:11px; padding:13px; border-radius:11px; border:1px solid var(--line); background:rgba(255,255,255,.035); }
.exrep .mini__c .ic{ background:none; }
.exrep .mini--star{ border-color:var(--warn-line); background:rgba(224,168,87,.07); }
.exrep .mini--star .ic{ color:var(--warn); border-color:var(--warn-line); }
.exrep .mini--sos{ border-color:rgba(233,75,123,.32); background:rgba(233,75,123,.06); }
.exrep .mini--sos .ic{ color:var(--mag); border-color:rgba(233,75,123,.32); }
.exrep .mini__k{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:.12em; text-transform:uppercase; color:var(--ts); display:block; margin-bottom:4px; }
.exrep .mini__t{ font-size:0.8125rem; color:var(--ts); line-height:1.5; }
.exrep .mini__t b{ color:var(--ink); font-weight:700; }

/* подзаголовок внутри разбора (Картина дня / Начни с / Зона роста) */
.exrep .sub{ display:flex; align-items:center; gap:8px; font-weight:700; font-size:0.875rem; color:var(--ink); margin:4px 0 7px; }
.exrep .sub .d{ width:9px; height:9px; border-radius:3px; flex:none; }
.exrep .sub .d--sum{ background:var(--violet); } .exrep .sub .d--start{ background:var(--teal); } .exrep .sub .d--grow{ background:var(--warn); }

/* ——— профиль навыков (защита от app.css .gauge) ——— */
.exrep .prof{ display:flex; align-items:center; gap:18px; border:1px solid var(--line); border-radius:14px; padding:18px 20px;
  background:#14161f; margin-bottom:13px; }
.exrep .prof__name{ font-size:1.3125rem; font-weight:800; letter-spacing:-.01em; }
.exrep .prof__meta{ font-family:var(--mono); font-size:0.6875rem; color:var(--ts); margin-top:5px; }
.exrep .gauge{ width:88px; height:88px; flex:none; border-radius:50%; display:grid; place-items:center; position:relative;
  background:conic-gradient(var(--gc) calc(var(--p)*1%), rgba(255,255,255,.08) 0); }
.exrep .gauge::before{ content:""; position:absolute; inset:9px; border-radius:50%; background:#0e1322; }
.exrep .gauge__n{ position:relative; font-weight:800; font-size:1.4375rem; }
.exrep .gauge__c{ position:relative; font-family:var(--mono); font-size:0.625rem; letter-spacing:.14em; color:var(--ts); margin-top:2px; text-transform:uppercase; }

.exrep .skill{ border:1px solid var(--line); border-radius:12px; padding:14px 16px; margin-bottom:10px; background:rgba(255,255,255,.025); }
.exrep .skill__top{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.exrep .skill__n{ font-weight:700; font-size:0.875rem; }
.exrep .skill__sc{ font-family:var(--mono); font-weight:700; font-size:0.9375rem; }
.exrep .skill__tr{ font-family:var(--mono); font-size:0.625rem; color:var(--ts); margin-right:8px; }
.exrep .bar{ height:6px; border-radius:6px; background:rgba(255,255,255,.08); overflow:hidden; margin:9px 0 10px; }
.exrep .bar i{ display:block; height:100%; border-radius:6px; width:calc(var(--v)*10%); background:var(--bc); }
.exrep .skill__lbl{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:.1em; text-transform:uppercase; margin:6px 0 4px; }
.exrep .skill__lbl.ok{ color:var(--teal2); } .exrep .skill__lbl.grow{ color:var(--warn); }
.exrep .chips{ display:flex; flex-wrap:wrap; gap:7px; }
.exrep .chip{ font-size:0.71875rem; padding:5px 10px; border-radius:40px; border:1px solid var(--warn-line); color:var(--warn); background:rgba(224,168,87,.06); }
.exrep .chip--ok{ border-color:var(--tline); color:var(--teal2); background:rgba(30,217,163,.06); }

/* ——— команда ——— */
.exrep .trow{ display:flex; align-items:center; gap:14px; border:1px solid var(--line); border-radius:12px; padding:13px 16px; margin-bottom:9px;
  background:rgba(255,255,255,.025); }
.exrep .trow__n{ font-weight:700; font-size:0.875rem; min-width:120px; }
.exrep .trow__sc{ font-family:var(--mono); font-weight:700; font-size:0.9375rem; width:40px; }
.exrep .trow__bar{ flex:1; min-width:90px; }
.exrep .trow__crit{ font-size:0.71875rem; color:var(--ts); flex:2; min-width:180px; } .exrep .trow__crit b{ color:var(--warn); }

/* утилиты */
.exrep .mt{ margin-top:11px; } .exrep .muted{ color:var(--tm); } .exrep .small{ font-size:0.75rem; }
.exrep .note{ border:1px solid var(--tline); border-left:3px solid var(--teal); background:rgba(30,217,163,.06);
  border-radius:10px; padding:13px 15px; font-size:0.84375rem; color:var(--ts); line-height:1.6; }
.exrep .note b{ color:var(--ink); }
.exrep .warnrow{ display:flex; align-items:center; gap:8px; font-size:0.75rem; color:var(--warn); margin-bottom:9px; }
.exrep .warnrow svg{ width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.8; }

/* ——— шапка-бонус + нижний CTA (вне .exrep, используют классы сайта) ——— */
.unlock-actions{ display:flex; flex-wrap:wrap; gap:12px; margin-top:20px; }
/* специфичнее, чем .subhero p из app.css (иначе перебивает размер) */
.exrep-hero .exrep-intro__note{ margin-top:14px; font-size:0.75rem; color:var(--tm); max-width:520px; }

/* ——— адаптив ——— */
@media (max-width:640px){
  .exrep .mini{ grid-template-columns:1fr; }
  .exrep .prof{ flex-direction:column; align-items:flex-start; gap:14px; }
  .exrep .trow{ flex-wrap:wrap; }
  .exrep .trow__n{ min-width:0; }
  .exrep .trow__crit{ flex-basis:100%; }
}

/* ===== интерактив страницы-награды (табы / аккордеоны / анимация) ===== */

/* hero: центрируем кнопки и добавляем строку статов */
.unlock-actions{ justify-content:center; }
.exrep-hero .lead{ margin-left:auto; margin-right:auto; }
.exrep-stats{ display:flex; flex-wrap:wrap; justify-content:center; gap:16px 34px; margin-top:26px; }
.exrep-stat{ display:flex; flex-direction:column; align-items:center; gap:3px; }
.exrep-stat__n{ font-family:'JetBrains Mono','Consolas',monospace; font-weight:700; font-size:1.6875rem; color:var(--teal); line-height:1; }
.exrep-stat__u{ font-size:0.8125rem; margin-left:3px; color:var(--ts); font-weight:700; }
.exrep-stat__l{ font-size:0.75rem; color:var(--ts); }

/* .show внутри .exrep — на всю ширину колонки */
.exrep-show{ max-width:none; margin:0; }

/* липкая панель табов */
.exrep-tabbar{ position:sticky; top:68px; z-index:40; display:flex; align-items:center; gap:14px; flex-wrap:wrap; justify-content:space-between;
  margin:0 0 22px; padding:11px 14px; border:1px solid var(--line); border-radius:14px;
  background:rgba(12,11,22,.96); }
.exrep-tabbar .show__tabs{ margin:0; justify-content:flex-start; }
.exrep-tabbar__dl{ flex:none; }
/* две подписанные группы в одну строку — как в навигации самого продукта:
   «Отчёты ИИ» (документ) и «Живые экраны» (панель платформы) */
/* подпись над чипами, а не слева: колонка отчёта всего 880px, в одну строку
   шесть чипов с подписями не помещаются ни на каком экране */
.exrep-tabbar__groups{ display:flex; flex-direction:column; align-items:stretch; gap:10px; flex:1; min-width:0; }
.tabgrp{ display:flex; flex-direction:column; align-items:flex-start; gap:5px; min-width:0; }
.tabgrp .show__tabs{ width:100%; }
.tabgrp__l{ flex:none; font-family:var(--mono); font-size:0.625rem; letter-spacing:.14em;
  text-transform:uppercase; color:var(--tm); white-space:nowrap; }
/* короткая подпись вкладки — только для узких экранов */
.tb-s{ display:none; }
/* кнопка сворачивания панели — только на телефоне */
.tabfold{ display:none; }
@media (max-width:640px){
  /* липкая панель съедает экран при прокрутке, поэтому сворачивается.
     Свёрнутая — одна строка с текущим разделом и заметной стрелкой. */
  .tabfold{ display:flex; align-items:center; gap:9px; width:100%; min-height:44px;
    padding:8px 14px; margin:0; cursor:pointer; font-family:inherit; font-size:0.8125rem;
    color:var(--ts); text-align:left; border:1px solid var(--tline); border-radius:var(--r-pill);
    background:rgba(30,217,163,.07); }
  .tabfold__l{ flex:none; font-family:var(--mono); font-size:0.5625rem; letter-spacing:.14em;
    text-transform:uppercase; color:var(--tm); }
  .tabfold__cur{ font-weight:700; color:var(--ink); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .tabfold__chev{ flex:none; width:18px; height:18px; margin-left:auto; stroke:var(--teal2);
    fill:none; stroke-width:2.2; stroke-linecap:round; stroke-linejoin:round;
    transition:transform .3s cubic-bezier(.22,1,.36,1); }
  .exrep-tabbar:not(.is-folded) .tabfold__chev{ transform:rotate(180deg); }
  .tabfold:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
  /* список ложится ПОВЕРХ контента, а не раздвигает его: панель в потоке
     занимает место, и при раскрытии текст под ней уезжал вниз */
  .tabfold__body{ position:absolute; left:10px; right:10px; top:calc(100% - 4px);
    padding:12px; border:1px solid var(--line); border-radius:14px;
    background:rgba(12,11,22,.98); box-shadow:0 22px 46px -18px rgba(0,0,0,.92);
    opacity:1; visibility:visible; transform:none;
    transition:opacity .24s ease, transform .26s cubic-bezier(.22,1,.36,1), visibility .26s; }
  .tabfold__body>div{ min-height:0; }
  .exrep-tabbar.is-folded .tabfold__body{ opacity:0; visibility:hidden;
    transform:translateY(-8px); pointer-events:none; }
  .exrep-tabbar{ top:68px; padding:10px; }
  /* шесть вкладок в четыре ряда съедали ~220px липкой шапки. На телефоне —
     одна строка с горизонтальным свайпом (полоса прокрутки скрыта) и
     короткие подписи; справа градиент-подсказка, что список листается. */
  .exrep-tabbar .show__tabs{ flex-wrap:nowrap; gap:8px; justify-content:flex-start;
    overflow-x:auto; min-width:0; scrollbar-width:none; -ms-overflow-style:none;
    scroll-snap-type:x proximity; padding-right:22px; }
  .exrep-tabbar .show__tabs::-webkit-scrollbar{ display:none; }
  .exrep-tabbar .show__tab{ flex:0 0 auto; scroll-snap-align:start;
    white-space:nowrap; font-size:0.78125rem; padding:8px 13px; }
  .exrep-tabbar .tb-l{ display:none; }
  .exrep-tabbar .tb-s{ display:inline; }
  .exrep-tabbar::after{ content:""; position:absolute; right:10px; top:10px; bottom:10px;
    width:26px; border-radius:0 12px 12px 0; pointer-events:none;
    background:linear-gradient(90deg,rgba(12,11,22,0),rgba(12,11,22,.96)); }
  .exrep-tabbar__dl{ display:none; }
}

/* Слот под плавающую кнопку «Назад».
   Кнопка — fixed на top:72px, панель — sticky на top:68px: как только панель
   прилипла к шапке, они оказываются в одной горизонтальной полосе и неизбежно
   пересекаются, пока слева от панели нет места под кнопку.

   Место появляется само с 1044px, и вот откуда это число: колонка отчёта .exrep
   шириной 880px центрируется внутри .container (max-width 1180px, padding 26px),
   у самой колонки ещё padding 16px. Пока ширина окна ≤ 932px (880+26·2), панель
   упирается в левый край и стоит на x=42. Дальше она уезжает вправо на половину
   лишней ширины. Кнопка при этом прижата к x=16 и кончается на x=102, значит
   зазор в 10px набирается при ширине 1044px и больше — там слот уже не нужен.

   Раньше слот обрывался на 640px, и в полосе 641–1043px кнопка ложилась на
   подпись группы. 68px = 36px кнопки + 32px воздуха; ширины пилюли (86px)
   он тоже хватает: контент начинается минимум на x=110 против её края в x=102. */
@media (max-width:1043px){
  .exrep-tabbar{ transition:padding-left .2s ease; }
  html.has-backtab.bar-stuck .exrep-tabbar{ padding-left:68px; }
}

/* компактный заголовок раздела (вместо divider-страницы) */
.exrep-sec{ display:flex; align-items:flex-start; gap:18px; margin:2px 0 18px; }
.exrep-sec__no{ font-family:'JetBrains Mono','Consolas',monospace; font-weight:700; font-size:clamp(2.5rem,9vw,4.125rem); line-height:.85; color:rgba(255,255,255,.07); flex:none; }
.exrep-sec__ey{ font-family:'JetBrains Mono','Consolas',monospace; font-size:0.6875rem; letter-spacing:.24em; text-transform:uppercase; color:var(--teal); margin-bottom:7px; }
.exrep-sec__t{ font-size:clamp(1.375rem,4vw,1.875rem); font-weight:800; letter-spacing:-.02em; margin-bottom:9px; }
.exrep-sec__sub{ font-size:0.875rem; color:var(--ts); line-height:1.55; max-width:560px; margin-bottom:12px; }

/* контент-блок внутри аккордеона (не список) */
.exrep .exa-pad{ padding:4px 16px 16px; }

/* data-cat=do — фиолетовый акцент */
.exrep .acc__item[data-cat="do"] .acc__ic{ color:var(--violet); }
.exrep .acc__item[data-cat="do"]::before{ background:var(--violet); }

/* анимация заполнения полосок навыков/команды */
.exrep .bar i{ transform-origin:left; transition:transform .9s cubic-bezier(.22,1,.36,1); }

/* при «уменьшении движения» сворачиваем мгновенно, без анимации */
@media (prefers-reduced-motion: reduce){
  .tabfold__body{ transition:none; }
  .exrep-tabbar{ transition:none; }
  .tabfold__chev{ transition:none; }
}

/* no-JS фолбэк: показываем все панели, прячем табы */
html:not(.js) .exrep-tabbar{ display:none; }
html:not(.js) .exrep .show__panel{ display:block; margin-bottom:30px; }

/* гадж: подпись «Общий балл» под кольцом (а не внутри, чтобы не жалась) */
.exrep-gaugewrap{ flex:none; display:flex; flex-direction:column; align-items:center; gap:9px; }
.exrep-gaugelbl{ font-family:'JetBrains Mono','Consolas',monospace; font-size:0.625rem; letter-spacing:.14em; text-transform:uppercase; color:var(--ts); }

/* кликабельные номера сделок (как на hero) — оставляем моноширинными */
.exrep .dealx{ font-family:'JetBrains Mono','Consolas',monospace; font-weight:500; }

/* ——— список профилей сотрудников (Раздел 3) ——— */
.exrep .empdept{ display:flex; align-items:center; gap:10px; margin:2px 0 14px; flex-wrap:wrap; }
.exrep .empdept__ic{ width:30px; height:30px; flex:none; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); color:var(--ts); }
.exrep .empdept__ic svg{ width:17px; height:17px; }
.exrep .empdept__name{ font-weight:800; font-size:1rem; letter-spacing:-.01em; }
.exrep .empdept__badge{ font-family:var(--mono); font-size:0.6875rem; letter-spacing:.03em; color:var(--teal2); border:1px solid var(--tline); background:rgba(30,217,163,.07); border-radius:40px; padding:4px 11px; }

.exrep .emplist{ display:flex; flex-direction:column; gap:11px; }
.exrep .empcard{ display:flex; align-items:center; justify-content:space-between; gap:16px; border:1px solid var(--line); border-radius:14px; background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015)),#14161f; box-shadow:0 18px 40px -24px rgba(0,0,0,.75),inset 0 1px 0 rgba(255,255,255,.06); padding:16px 18px; transition:transform .25s ease,border-color .25s ease,box-shadow .25s ease; }
.exrep .empcard:hover{ transform:translateY(-3px); border-color:var(--tline); box-shadow:0 26px 52px -22px rgba(0,0,0,.82),inset 0 1px 0 rgba(255,255,255,.08); }
.exrep .empcard__body{ flex:1; min-width:0; }
.exrep .empcard__id{ display:flex; align-items:center; gap:9px; margin-bottom:10px; }
.exrep .empcard__ava{ width:28px; height:28px; flex:none; display:grid; place-items:center; border-radius:8px; border:1px solid var(--line); background:rgba(255,255,255,.03); color:var(--ts); }
.exrep .empcard__ava svg{ width:16px; height:16px; }
.exrep .empcard__name{ font-weight:700; font-size:0.9375rem; color:var(--ink); }
.exrep .empcard__row{ display:flex; align-items:center; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.exrep .empcard__l{ font-size:0.8125rem; color:var(--ts); }
.exrep .empmeter{ display:inline-flex; gap:3px; align-items:center; }
.exrep .empmeter i{ width:8px; height:15px; border-radius:2px; background:rgba(255,255,255,.09); }
.exrep .empmeter--red i.on{ background:var(--red); }
.exrep .empmeter--warn i.on{ background:var(--warn); }
.exrep .empcard__num{ font-family:var(--mono); font-weight:700; font-size:0.9375rem; }
.exrep .empcard__meta{ display:flex; align-items:center; gap:14px; font-size:0.8125rem; color:var(--ts); margin-bottom:8px; }
.exrep .empcard__meta:last-child{ margin-bottom:0; }
.exrep .empcard__tr--down{ color:var(--red); }
.exrep .empcard__crit{ font-size:0.8125rem; color:var(--ts); line-height:1.5; margin:0; }
.exrep .empcard__crit b{ color:var(--red); font-weight:700; }
.exrep .empcard__open{ position:relative; flex:none; font-family:var(--mono); font-size:0.75rem; color:var(--teal2); border:1px solid var(--tline); background:rgba(30,217,163,.06); border-radius:40px; padding:9px 15px; white-space:nowrap; cursor:pointer; transition:border-color .2s,background .2s,transform .2s; }
.exrep .empcard__open:hover{ border-color:var(--teal); background:rgba(30,217,163,.12); transform:translateY(-1px); }
.exrep .empcard__open:active{ transform:translateY(0); }
.exrep .empcard__open:focus-visible{ outline:2px solid var(--teal); outline-offset:3px; }
/* демо-подпись: по клику «Открыть профиль» всплывает прямо у кнопки (без перехода на вкладку) */
.exrep .empcard__open.hint-open{ z-index:15; }
.exrep .empcard__hint{ position:absolute; right:0; bottom:calc(100% + 10px); width:max-content; max-width:min(300px,78vw); white-space:normal; text-align:left; font-family:var(--sans); font-weight:400; font-size:0.8125rem; letter-spacing:0; text-transform:none; line-height:1.45; color:var(--ink); background:rgba(16,18,46,.98); border:1px solid var(--line); border-radius:10px; padding:11px 13px; box-shadow:0 16px 38px -12px rgba(0,0,0,.9); opacity:0; visibility:hidden; transform:translateY(5px); pointer-events:none; transition:opacity .18s ease,transform .18s ease,visibility .18s; z-index:2; }
.exrep .empcard__hint b{ color:var(--teal2); font-weight:700; }
.exrep .empcard__open.hint-open .empcard__hint{ opacity:1; visibility:visible; transform:translateY(0); }
@media (max-width:640px){ .exrep .empcard__hint{ right:auto; left:0; } }

@media (max-width:640px){
  .exrep .empcard{ flex-direction:column; align-items:stretch; gap:12px; }
  .exrep .empcard__open{ align-self:flex-start; }
}

/* тач: хит-зона кнопки «Открыть отчёт» ≥44px без изменения вида */
@media (hover:none){
  .exrep .empcard__open::before{ content:""; position:absolute; inset:-6px 0; }
}