/* ============================================================
   ЕДС · твик оформления кнопок: «уголки»
   Прямоугольная плита с уголками по углам; в ховере цвет
   инвертируется, уголки поджимаются, углы чуть скругляются.
   Только десктоп. Кнопки меню, карточек задач и мессенджеров
   не участвуют.
   ============================================================ */

@media (min-width:1074px){
  body.btn-brk .btn,
  body.btn-brk .hb-act{clip-path:none;overflow:visible;
    transition:background .2s ease,color .2s ease,border-radius .2s ease,transform .16s ease}
  body.btn-brk .btn::before{display:none}

  body.btn-brk .btn::after,
  body.btn-brk .hb-act::after{content:"";position:absolute;inset:3px;pointer-events:none;
    border:1.75px solid currentColor;border-radius:0;
    -webkit-mask:
      linear-gradient(#000 0 0) 0 0/11px 11px no-repeat,
      linear-gradient(#000 0 0) 100% 0/11px 11px no-repeat,
      linear-gradient(#000 0 0) 0 100%/11px 11px no-repeat,
      linear-gradient(#000 0 0) 100% 100%/11px 11px no-repeat;
    mask:
      linear-gradient(#000 0 0) 0 0/11px 11px no-repeat,
      linear-gradient(#000 0 0) 100% 0/11px 11px no-repeat,
      linear-gradient(#000 0 0) 0 100%/11px 11px no-repeat,
      linear-gradient(#000 0 0) 100% 100%/11px 11px no-repeat;
    transition:inset .22s cubic-bezier(.2,.8,.2,1),border-radius .22s ease}

  body.btn-brk .hb-act{position:relative}
  body.btn-brk .btn:hover::after,
  body.btn-brk .hb-act:hover::after{inset:6px;border-radius:0}
  body.btn-brk .btn:hover,
  body.btn-brk .hb-act:hover{border-radius:7px;filter:none;transform:none}

  /* инверсия: оранжевый ⇄ чёрный */
  body.btn-brk .btn:hover,
  body.btn-brk .hb-act:not(.hb-menu):hover{background:var(--chassis);color:var(--on-chassis)}
  body.btn-brk .btn.dark:hover,
  body.btn-brk .btn.on-dark:hover,
  body.btn-brk .hb-act.hb-menu:hover{background:var(--signal);color:var(--signal-ink);box-shadow:none}
  body.btn-brk .btn.quiet{box-shadow:none}
  body.btn-brk .hb-act.hb-menu{box-shadow:none}
  body.btn-brk .btn.quiet:hover{background:var(--chassis);color:var(--on-chassis);box-shadow:none}
}

@media (min-width:1074px) and (prefers-reduced-motion:reduce){
  body.btn-brk .btn,body.btn-brk .hb-act,
  body.btn-brk .btn::after,body.btn-brk .hb-act::after{transition:none}
}