Danny Arty

Вы кстати забыли закрыть теги <li>

.right {
  width: calc(100% - 300px);
  height: 300px;
  background: blue;
  flex-grow: 1; /*добавить эту строчку*/
}

#result{
    font-size: 30px;
    color: #fff;
    border: 1px #000;
    border-radius: 10px;    
    background-color: #ff715b;
    border-style: none;   
}
#result:not(:empty) {
    padding: 10px;
    box-shadow: 5px 5px 5px #e4887a;
}

Способов много.

document.getElementById('loader').animate({width: '100%'}, 500);

У вас у li задано width: 150px;

nav ul ul li {
width: auto; 
}

Можно с помощью text-stroke, но он не поддерживается IE (вариант слева). Либо с помощью svg text (вариант справа)

Определенно при клике. А тогглером будет у вас button или a - это уже дело ваше, хотя я склоняюсь ко второму.
Почему использовать клик, а не ховер для открытия навигации?
1) Очевидно дело в юзабилити - при ховере юзеру придется постоянно наводить на нужный элемент, чтобы меню появилось, а если вдруг он случайно наведет не туда при уже открытом меню? Ему придется опять возвращаться к первоначальной точке.
2) В любом случае придется переписывать логику под клик для планшетов и мобильных. Так зачем выполнять одну работу дважды?
3)

но дизайнер со страстью которой можно позавидовать топит именно за него

Его область - дизайн, а как это будет работать - это уже ваша задача, так что ваше мнение тут должно быть приоритетнее. И на край скиньте ему ссылку для прочтения Why Hover Menus Do Users More Harm Than Good

Укажите для .v свойство, если я правильно понял вопрос

.v {
  flex-grow: 1;
}

0. this.closest('.task');
1. svg.style.fill='#f1f1f1';
2. Не надо
3. Имеет
4. Можно, но какой смысл? Используйте id в тех случаях, когда с данным элементом планируется работа через js.

Добавить версию при подключении, условно до изменений было:

<link rel="stylesheet" href="style.css">
<script src="/script.js"></script>

Можете просто после изменений дописать к ним версии, например

<link rel="stylesheet" href="style.css?v=1.0">
<script src="/script.js?v=1.1"></script>

В большинстве случаев это сработает.

Например так:
задать margin для дочерних элементов flex-контейнера и в то же время задать ему самому отрицательный margin

Это как пример, дальше под ваши задачи измените данные

.simple {
        display: inline-block;        
}
.simple:after {        
        content: '';
        display: inline-block;
        width: 12px;
        height: 12px;
        margin-left: 30px;
        background-image: url("https://cdn1.savepice.ru/uploads/2022/4/16/edcafd0e519812c52d181453d55029dd-full.png");
        background-repeat: no-repeat;
        background-size: contain;  
}
.simple:hover:after {
        background-image: url("https://cdn1.savepice.ru/uploads/2022/4/16/b65792e10f9241773936ac68751ba911-full.png");
}