@layer ui {
/* Десктоп 1440×900 (ritm#17) по design_handoff_ritm/Десктоп.dc.html.

   Разметка та же, что на телефоне: боковая полоса — это нижняя навигация,
   разложенная столбцом, с той же пятёркой пунктов и теми же иконками. Разделов,
   которых нет на телефоне, здесь не появляется — требование макета.

   Порог 1000 px. Ниже остаётся телефонная раскладка (она же на планшете в
   портрете и в узком окне браузера), выше — боковая полоса, широкие доска и
   календарь. Всё в одном файле и в одном @media: так видно целиком, что
   меняется на широком экране, и так это снимается одной строкой в layout.html.

   Место под полосу отдаёт сам экран (padding-left у .screen), а не body:
   страница входа боковой полосы не имеет, и отступ у body увёл бы её в пустоту.
   В предел ширины экрана место под полосу входит вместе с колонкой, и
   `margin: 0 auto` ставит эту коробку по центру оставшейся ширины — той же
   арифметикой сдвинуты плавающие панель захвата, тост и шторки. */

/* Ширина боковой полосы — зарегистрированной переменной (ritm#485): только
   такую браузер умеет менять плавно. Полоса и всё, что отступает на её ширину
   (экран, панель захвата, тост, шторки), едут по ней в одном темпе. */
@property --nav-w {
  syntax: '<length>';
  inherits: true;
  initial-value: 0px;
}

@media (min-width: 1000px) {
  :root {
    /* Ширина боковой полосы из макета. */
    --nav-w: 232px;
    /* Строки 16 px, мета 14 (E7, ritm#315): с монитора те же 15/13, что на
       телефоне в руке, читались мельче телефонных. Корневой кегль — тот же
       --text-sm, поэтому колонка в rem растёт вместе с текстом. */
    --text-sm: 14px;
    --text-md: 16px;
  }

  /* --- боковая полоса ------------------------------------------------------ */

  .tabbar {
    /* На широком экране полоса снова прикреплена к окну: тут нет ни мобильных
       панелей браузера, ни их пересчёта (ritm#128). */
    position: fixed;
    align-self: stretch;
    /* Ширина полосы — вместе с полями и рамкой: без этого 232 px превращались в
       265, и заголовок экрана уходил под полосу. */
    box-sizing: border-box;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--nav-w);
    transform: none;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-6) var(--space-4);
    background: var(--surface);
    border-top: 0;
    border-right: 1px solid var(--line);
    /* Низкое окно: полоса прокручивается сама и не выталкивает подвал. */
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-brand {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-bottom: var(--space-5);
    padding: 0 var(--space-2);
  }

  .nav-mark {
    flex: none;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--on-accent);
    font-family: var(--font-display);
    font-weight: var(--weight-bold);
  }

  .nav-name {
    font-family: var(--font-display);
    font-size: var(--text-lg);
    font-weight: var(--weight-semibold);
  }

  /* Пункт из столбика в строку: иконка, подпись, тот же активный цвет. Высота
     44px — из макета; ниже палец и курсор одинаково промахиваются. */
  .tab {
    flex: none;
    flex-direction: row;
    justify-content: flex-start;
    gap: var(--space-3);
    min-height: 44px;
    padding: 0 var(--space-3);
    border-radius: var(--radius-md);
    font-size: var(--text-md);
    transition: background var(--dur-1) var(--ease);
  }

  .tab-label {
    flex: 1;
  }

  .tab-on {
    background: var(--accent-soft);
  }

  .tab:hover:not(.tab-on) {
    background: var(--surface-sunken);
  }

  .tab:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: -2px;
  }

  /* --- подвал полосы: пространство и связь ---------------------------------- */

  .nav-foot {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    margin-top: auto;
    padding-top: var(--space-5);
  }

  .nav-space {
    margin: 0;
    position: relative;
  }

  /* Кнопка выбора — тот же .pick-btn, что в шапке «Дня», только в рамке и
     во всю ширину полосы. display не трогаем: им управляет picker.css, и без
     скрипта вместо кнопки остаётся родной список с «Показать». */
  .nav-space-btn,
  .nav-space-one {
    box-sizing: border-box;
    align-items: center;
    gap: var(--space-3);
    width: 100%;
    max-width: none;
    min-height: 44px;
    padding: 0 var(--space-3);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    color: var(--text);
    font: inherit;
    font-size: var(--text-sm);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
  }

  .nav-space-one {
    display: flex;
  }

  .nav-space-btn:hover,
  .nav-space-one:hover {
    border-color: var(--line-strong);
  }

  .nav-space-mark {
    flex: none;
    width: 24px;
    height: 24px;
    display: grid;
    place-items: center;
    border-radius: var(--radius-sm);
    background: var(--accent-soft);
    color: var(--accent);
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
  }

  .nav-space-btn .pick-value,
  .nav-space-name {
    flex: 1;
    min-width: 0;
    max-width: none;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .nav-space-btn .ic {
    flex: none;
    color: var(--text-secondary);
  }

  /* «+N» — сколько ещё досок выбрано (ritm#458): кружок «+N» из стопки шапки
     (ritm#251). У раскрытой полосы это говорит подпись «Личное · ещё 2», и
     кружок не нужен; у сложенной подписи нет — там он стоит рядом со знаком. */
  .nav-space-btn .nav-space-more {
    display: none;
  }

  /* Без скрипта выбор остаётся списком отметок прямо в полосе. */
  .nav-space .pick-native-list {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-1);
    margin-bottom: var(--space-2);
  }

  /* Строка связи говорит то же и теми же словами, что оффлайн-экран. Всегда в
     одну строку (ritm#458): у сложенной полосы «ждут отправки: 3» переносилось
     в три строки и поднимало выбор пространства на 31 px. Не влезло — многоточие,
     целиком строка — в подсказке (pwa.js). */
  .nav-net {
    padding: 0 var(--space-3);
    font-size: var(--text-xs);
    color: var(--text-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .nav-net:empty {
    display: none;
  }

  /* «Свернуть панель» (ritm#418) — последней строкой подвала, пунктом полосы:
     разметка button.tab, поэтому та же строка с иконкой и подписью, что у
     пунктов, только тише. Снимаем с неё вид системной кнопки. */
  .nav-fold {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-muted);
    text-align: left;
    cursor: pointer;
  }

  .nav-fold:hover {
    color: var(--text);
  }

  /* --- лист экрана --------------------------------------------------------- */

  /* Колонка не растягивается на монитор: ежедневник читается колонкой, а не
     строкой в полтора метра. Под панелью захвата остаётся её высота с зазором,
     нижней навигации внизу больше нет. */
  .screen {
    /* Коробка border-box, поэтому в предел входит и место под полосу: 46rem
       колонки плюс ширина полосы. `margin: 0 auto` центрирует эту коробку в
       остатке окна — та же арифметика, что была при content-box. */
    max-width: calc(46rem + var(--nav-w));
    padding-left: var(--nav-w);
    padding-bottom: 6rem;
  }

  /* Доска и календарь занимают всю ширину и всю высоту окна: полоса колонок и
     сетка недели прокручиваются внутри себя, страница целиком — нет. */
  .screen-wide {
    display: flex;
    flex-direction: column;
    max-width: none;
    padding-bottom: 0;
    /* Ровно по ширине окна, а не по ширине содержимого. Телефонная колонка
       стоит по центру за счёт `margin: 0 auto`, но у элемента гибкой раскладки
       автополя вбок отменяют растягивание: экран переставал равняться на
       оболочку и разрастался под доску в 2300 px, а четвёртая колонка уезжала
       за край окна и не прокручивалась ничем (ritm#130). */
    margin: 0;
  }

  /* Пространство переключается в боковой полосе — в шапке экрана оно было бы
     вторым таким же переключателем. Подпись периода на «Прогрессе» это не
     трогает: она не в строке шапки, а рядом с заголовком. */
  .tday-head-row > .tday-space,
  .tday-head-row > .tday-space-pick,
  .board-head > .tday-space,
  .board-head > .tday-space-pick {
    display: none;
  }

  .tday-head,
  .task-head {
    padding: var(--space-6) var(--space-5) var(--space-3);
  }

  /* На широком экране дата крупнее, и пилюля растёт по содержимому: 140px
     здесь никого не выравнивают, а крупная дата в них не влезает. */
  .tday-date {
    width: auto;
    min-width: 140px;
    height: auto;
    min-height: 40px;
    padding: 0 var(--space-3);
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
  }

  /* Заголовок настроек крупнее заодно с датой: шапки разделов и вкладок
     читаются одним размером (ritm#264). */
  .setup-title {
    font-size: var(--text-2xl);
    line-height: 1.1;
  }

  .tday-body {
    padding: var(--space-2) var(--space-5) var(--space-6);
    gap: var(--space-4);
  }

  /* --- доска --------------------------------------------------------------- */

  /* Шапка доски и календаря живёт по тем же отступам, что «День» и
     «Прогресс» (ritm#91): на широком экране разница в четыре пикселя видна
     при переходе между вкладками. */
  .board-head {
    gap: var(--space-3);
    padding: var(--space-6) var(--space-5) var(--space-3);
  }

  /* Заголовок экрана виден только здесь: на телефоне его роль играет подпись
     пространства, которая на широком экране ушла в боковую полосу. */
  .board-title {
    display: block;
    margin-right: auto;
    font-family: var(--font-display);
    font-size: var(--text-2xl);
    font-weight: var(--weight-bold);
    line-height: 1.1;
  }

  /* Тумблер содержимого карточек: та же настройка, что в шторке настроек доски,
     вынесенная в шапку — на широком экране для неё есть место. */
  .board-toggle {
    display: block;
    margin: 0;
  }

  .board-toggle-btn {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 40px;
    padding: 0;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--text-sm);
    color: var(--text-secondary);
    cursor: pointer;
  }

  .board-switch {
    position: relative;
    flex: none;
    width: 44px;
    height: 26px;
    border-radius: 999px;
    background: var(--surface-sunken);
    border: 1px solid var(--line);
    transition: background var(--dur-1) var(--ease);
  }

  .board-switch::after {
    content: "";
    position: absolute;
    top: 2px;
    left: 2px;
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background: var(--surface-raised);
    box-shadow: var(--shadow-1);
    transition: transform var(--dur-1) var(--ease);
  }

  .board-toggle-btn[aria-pressed="true"] .board-switch {
    background: var(--accent);
    border-color: var(--accent);
  }

  .board-toggle-btn[aria-pressed="true"] .board-switch::after {
    transform: translateX(18px);
  }

  .board-toggle-btn:focus-visible {
    outline: 2px solid var(--accent);
    outline-offset: 3px;
  }

  .projects {
    flex-wrap: wrap;
    padding: var(--space-1) var(--space-6);
    overflow: visible;
  }

  .filter-note {
    padding: 0 var(--space-6);
  }

  /* Колонки 320px и полоса прокрутки: узкие колонки режут названия. Привязки
     прокрутки нет — она для пальца, а здесь ведут мышью и колесом. */
  .cols {
    flex: 0 1 auto; /* ростом по самой высокой колонке (ritm#286) */
    align-items: stretch;
    gap: var(--space-4);
    min-height: 0;
    padding: var(--space-4) var(--space-6) 5.5rem;
    scroll-snap-type: none;
  }

  /* Доску можно тянуть вбок (ritm#149), но «ладонь» на всём поле колонок в
     светлой теме почти не видна — белый курсор на светлом фоне (замечание
     владельца 10.09). Обычная стрелка контрастнее, а что доска тянется, видно
     по самой протяжке: ладонь показываем, пока тянут. */
  .cols {
    cursor: default;
  }

  .cols.is-panning {
    cursor: grabbing;
    user-select: none;
  }

  /* Колонки делят ширину доски поровну (ritm#416): не уже 260 — на узком окне
     полоса листается, как раньше. Предела сверху нет (решение владельца 28.09,
     ritm#436): при 560 доска на окне шире 2600 px кончалась архивом, а справа от
     него оставалось пустое поле; теперь колонки на любой ширине доходят до края,
     архив — у правого края. `none`, а не пусто: телефонные 86vw иначе
     остались бы пределом. */
  .col {
    flex: 1 1 0;
    width: auto;
    min-width: 260px;
    max-width: none;
    background: var(--surface);
    border: 1px solid var(--line);
  }

  /* Архив — узкая полоса с вертикальной подписью, как на телефоне (ritm#151):
     колонка в 320px под одну ссылку съедала место у живых колонок. Гибкость
     колонки ему не положена (ritm#416): с `flex: 1 1 0` от .col полоса росла
     вместе с колонками, и справа от «Готово» стояла пустая колонка с подписью
     «Архив» посередине. */
  .col-arch {
    flex: none;
    width: 44px;
    min-width: 44px;
    max-width: none;
    background: none;
    border: 0;
  }

  .col-head {
    background: var(--surface);
    border-bottom: 1px solid var(--line);
  }

  .col-body {
    padding-top: var(--space-2);
  }

  /* --- календарь ----------------------------------------------------------- */

  .cal-track {
    flex: 1;
    min-height: 0;
  }

  .cal-pane {
    display: flex;
    flex-direction: column;
    min-height: 0;
  }

  /* Дата между стрелок, группой у левого края — как на «Дне» (ritm#149).
     Раньше заголовок стоял у левого края, а стрелки уезжали к правому, и в
     1400 px между ними был метр пустоты. */
  .board-head {
    justify-content: flex-start;
    gap: var(--space-1);
    padding-left: var(--space-6);
    padding-right: var(--space-6);
  }

  .board-head .head-icon {
    margin: 0;
  }

  /* Строка поиска на широком экране не тянется во всю ширину: строка в метр не
     читается, а поле поиска тем более. */
  .findrow {
    padding: 0 var(--space-6) var(--space-2);
  }

  .findrow-box {
    max-width: 28rem;
  }

  .seg {
    margin: 0 var(--space-6);
    max-width: 24rem;
  }

  /* Сетка недели во всю ширину: семь гибких колонок вместо полосы прокрутки по
     96px — на 1440 это ~150px на день, как в макете. */
  .grid-wrap {
    flex: 1;
    min-height: 0;
    max-height: none;
    /* До низа окна (ritm#431): панель захвата лежит поверх сетки, как на «Дне»
       и «Задачах», а поле под неё — внутри прокрутки (ниже, у дня и недели):
       последний час докручивается из-под пилюли. Раньше сетка кончалась над
       панелью, и та стояла под ней отдельной полосой. */
    margin: var(--space-3) var(--space-6);
  }

  /* Телефонная шапка календаря (ritm#165) на широком экране разворачивается
     обратно: поиск и вид отдельными строками, стрелки периода полновесные. */
  /* Вид календаря — в строке шапки, справа перед лупой (E4, ritm#315):
     отдельной строкой он съедал полсотни пикселей высоты сетки. Обёртка встаёт
     поверх строки шапки — в раскладку самой шапки ничего не добавляется, а на
     телефоне разметка та же. Строка шапки — 44 px от её верхнего поля. */
  .screen-wide:has(> .cal-tools) {
    position: relative;
  }

  .cal-tools {
    position: absolute;
    top: var(--space-6);
    right: calc(var(--space-5) + 44px + var(--space-2));
    height: 44px;
    display: flex;
    align-items: center;
  }

  .cal-tools .seg {
    flex: none;
    width: 18rem;
    max-width: none;
    margin: 0;
  }

  .cal-tools .seg-item {
    flex: 1;
    padding: 0;
  }

  .cal-when .tday-arrow {
    width: auto;
    min-width: 44px;
    min-height: 44px;
  }

  /* Поле под панель захвата — внутри прокрутки сетки (ritm#431): 5.5rem — как
     у доски и экранов с лентой, пилюля с отступом от низа окна. */
  .screen-wide[data-view="day"] .grid-wrap,
  .screen-wide[data-view="week"] .grid-wrap {
    margin-bottom: var(--space-3);
    padding-bottom: 5.5rem;
  }

  /* Ширина — по экрану, а не по содержимому: телефонное `max-content` нужно
     липкой колонке часов при прокрутке вбок, а здесь прокрутки вбок нет — семь
     равных колонок. С `max-content` одна длинная задача «без времени» растягивала
     колонку понедельника на весь монитор, остальные дни уезжали за край
     (ritm#147). */
  .grid {
    /* Час по умолчанию — 48 px (решение владельца 28.09, ritm#436). Было 62 —
       высота занятого часа (ritm#171), которую с ritm#424 получили все часы.
       На телефоне час свой, 54 (today.css): там по нему попадают пальцем.
       Полоса «без времени» считается от него же — задача ростом в полчаса.
       Щипок, Ctrl+колесо и «Ещё» → «Календарь» меняют высоту, как раньше;
       «плотная» сетка (DENSE в calendar.js) начинается ниже 44 — на 48 её нет. */
    --hour-h: 48px;
    box-sizing: border-box; /* иначе рамка выносит сетку на 2px за обёртку — и полоса */
    width: 100%;
    min-width: 0;
    grid-template-columns: 64px repeat(7, minmax(0, 1fr));
  }

  /* День — одна колонка во всю ширину, как неделя: узкий столбик по центру
     монитора читался как ошибка раскладки. */
  .grid[data-days="1"] {
    width: 100%;
    margin: 0;
    grid-template-columns: 64px minmax(0, 1fr);
  }

  /* Задача в клетке — одной строкой с многоточием: она подпись, а не абзац, и
     не имеет права двигать ширину колонки. Полное название — в карточке. */
  .cell .ev {
    min-width: 0;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Час выше, чем на телефоне: место есть, и блок события читается целиком.
     Высоту блоков считает calendar.js от высоты клетки — она пересчитывается
     при смене размера окна.

     Только часовым клеткам: у строки «без времени» высота своя, по числу
     задач, — иначе карточки без времени налезают на сетку часов (замечание
     владельца 07.09). */
  /* Час — одной высоты, занят он или пуст (ritm#424): шкала времени
     равномерная, как на телефоне, и блок события ростом ровно в свою
     длительность при любом масштабе. Раньше пустые часы были вдвое ниже
     занятых (ritm#149, ritm#151): ряд с событием вырастал в полный час, пустые
     соседи оставались половинными — час события глаз читал за два, а при
     масштабе пустые ряды росли вдвое медленнее занятых и упирались в подпись
     часа, и блоки «плавали» (владелец 27.09). Плотность сетки теперь —
     масштабом: щипок, Ctrl+колесо, «Ещё» → «Календарь». */
  .cell[data-hour] {
    /* Именно min-height, а не height (ritm#155): ряд задаёт самая высокая
       клетка — при мелком масштабе это подпись часа, — и с жёсткой высотой
       клетки не растягивались на ряд: под ними просвечивала тёмная подложка
       сетки, и строка выглядела «другого цвета». */
    height: auto; /* иначе телефонные 48px остаются при своей высоте часа */
    min-height: calc(var(--hour-h) - 6px); /* 42px при стандартных 48 (ritm#281, ritm#436) */
  }

  /* Задача без времени — высотой в полчаса от прежней часовой клетки
     (ritm#149): 28px вместо тонкого пояска, в который подпись не читалась.
     Пустые часовые строки при этом стали вдвое ниже — 28 вместо 56. Не выше
     32 px, как на телефоне (ritm#322): строка прилипает к шапке, и при часе,
     растянутом Ctrl+колесом, две её строки занимали бы треть сетки. */
  .cell:not([data-hour]) .ev {
    /* Блоком, а не флексом: во флексе длинное название резалось посреди слова
       без многоточия (аудит 23.09). По центру строку держит высота строки. */
    display: block;
    min-height: min(calc(var(--hour-h) / 2), 32px);
    line-height: min(calc(var(--hour-h) / 2), 32px);
    padding: 0 var(--space-2);
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Месяц занимает высоту панели, а не 56 px на строку: иначе сетка месяца
     висит маркой в углу монитора. Ширину задаём явно — панель теперь колонка
     флексбокса, и `margin: auto` без width сжал бы сетку до содержимого. */
  /* До низа окна, как сетка недели (ritm#431): панель захвата лежит поверх
     нижней строки, а сама панель месяца прокручивается на поле под пилюлю —
     нижний ряд докручивается из-под неё, под ней ничего не остаётся. Высота —
     от панели, а не flex: иначе поле снизу съедало бы высоту строк. */
  .screen-wide[data-view="month"] .cal-pane {
    overflow-y: auto;
  }

  .month {
    flex: none;
    height: calc(100% - 2 * var(--space-3));
    min-height: 0;
    /* Во всю ширину, с тем же полем в 24 px, что у недели (E3, ritm#315): по
       центру в 68rem месяц стоял сдвинутым относительно шапки и недели. */
    width: auto;
    margin: var(--space-3) var(--space-6) 5.5rem;
  }

  .month-row {
    flex: 1;
  }

  /* Клетка месяца — первые дела строками и «ещё N» (ritm#209, вариант Д):
     «09:30 Разбор почты» говорит, что именно в дне, а не только сколько.
     Число — в левом верхнем углу, рядом кольцо внимания, под ними строки:
     один левый край, по которому глаз идёт сверху вниз (ritm#466). Цвет
     категории — полосой слева у строки, поэтому точки при строках не нужны. */
  .mday {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    grid-template-rows: auto 1fr;
    align-content: start;
    align-items: center;
    column-gap: var(--space-2);
    row-gap: var(--space-1);
    min-width: 0;
    padding: 6px var(--space-2) var(--space-2);
  }

  .mday-num {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    min-width: 24px;
    height: 24px;
    line-height: 24px;
    font-size: var(--text-md);
    text-align: left;
  }

  .mday-today .mday-num {
    margin-left: -6px;
  }

  .dots {
    grid-column: 2;
    grid-row: 1;
    justify-self: start;
  }

  .mday:has(.mday-lines) .dots .dot {
    display: none;
  }

  .mday-lines {
    grid-column: 1 / -1;
    grid-row: 2;
    align-self: start;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
  }

  .mday-line {
    overflow: hidden;
    padding: 1px var(--space-1);
    border-left: 2px solid var(--cat, var(--line-strong));
    border-radius: 2px;
    background: color-mix(in srgb, var(--cat, var(--line-strong)) 14%, var(--surface-raised));
    color: var(--text);
    font-size: var(--text-xs);
    line-height: 1.35;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  /* Дни регулярных — тише разовых и после них (ritm#466): без плашки, текст
     вторым тоном. Они стоят в каждом дне и заглушали то, чем день отличается. */
  .mday-line.is-rep {
    background: none;
    color: var(--text-secondary);
    border-left-color: color-mix(in srgb, var(--cat, var(--line-strong)) 55%, transparent);
  }

  .mday-line.is-done {
    color: var(--text-muted);
  }

  .mday-time {
    color: var(--text-secondary);
    font-variant-numeric: tabular-nums;
  }

  .mday-more {
    padding: 0 var(--space-1);
    color: var(--text-muted);
    font-size: var(--text-xs);
  }

  /* День месяца — ссылка на день: под мышью клетка обведена. */
  .mday:not(.mday-today):hover {
    box-shadow: inset 0 0 0 1px var(--line-strong);
  }

  /* --- плавающее над экраном ------------------------------------------------ */

  /* Панель захвата, тост и полоска загрузки живут в окне, а не в листе: их
     двигает та же половина полосы, что центрирует колонку экрана. */
  /* Переключатель доски живёт в боковой полосе — второй, в шапке экрана, лишний
     (замечание владельца 10.09). На телефоне полосы нет, и он остаётся там. */
  .tday-head > .tday-space-pick,
  .tday-head > .tday-space,
  .board-head > .tday-space-pick,
  .board-head > .tday-space {
    display: none;
  }

  .cmp-wrap {
    left: calc(50% + var(--nav-w) / 2);
    width: min(32rem, calc(100% - var(--nav-w)));
    bottom: var(--space-5);
  }

  /* Мышью не промахиваются так, как пальцем: на десктопе диск микрофона
     меньше (замечание владельца 10.09). Меньше только диск — зона и ряд
     пилюли те же, что на телефоне, и диск стоит по середине зоны (ritm#295).
     Раньше здесь уменьшали и зону, и отправку до 36 px, а ряд оставался 44 —
     прижатые к низу, они стояли на 4 px ниже подписи (снимок владельца
     27.09); высота поля в 40 px и `right` замка под этот диск
     сняты вместе с ними. */
  .cmp {
    --cmp-disc: 36px;
  }

  .toast {
    left: calc(50% + var(--nav-w) / 2);
    bottom: 6rem;
  }

  .nav-bar {
    left: var(--nav-w);
  }

  /* Шторки остаются шторками — тем же компонентом, что на телефоне, — но
     встают по центру рабочей области, а не окна. */
  .sheet-back,
  .pick-back {
    padding-left: var(--nav-w);
  }

  /* Шторка раздела «Ещё» (ritm#264) на широком экране: телефонная ширина 26rem
     делала её уже подложки, а ручка свайпа тут ни к чему — свайпа нет. */
  .overlay-sheet {
    width: min(46rem, 100%);
  }

  .overlay-sheet .sheet-handle {
    display: none;
  }
}

/* Раздел «Файлы» (ritm#302): на широком экране плиток в ряд больше — сетка та
   же, меняется только сколько их помещается. */
/* От 1200 px (E1, E6, ritm#315): экраны-колонки раскладываются в ширину.
   Колонкой в 695 px посреди монитора «День», «Прогресс» и задача занимали
   треть ширины, а мысли и поля уходили ниже первого экрана. Ширина экрана —
   сумма колонок, промежутка и полей; уже окно — колонки ужимаются (minmax). */
@media (min-width: 1200px) {
  /* «День»: полоса дней — план и «без времени» — слева до 640 px, мысли справа
     до 480. Листание, перенос и «без времени» живут в полосе, как раньше. */
  .screen:has(> .tday-body > .tday-track) {
    max-width: calc(640px + 480px + var(--space-6) + 2 * var(--space-5) + var(--nav-w));
  }

  .tday-body:has(> .tday-track) {
    display: grid;
    grid-template-columns: minmax(0, 640px) minmax(0, 480px);
    align-items: start;
    column-gap: var(--space-6);
  }

  .tday-body > .tday-track {
    grid-column: 1;
    grid-row: 1;
  }

  .tday-body > .thoughts {
    grid-column: 2;
    grid-row: 1;
  }

  /* Телефон в другом поясе (ritm#532) — над днём в его колонке; мысли справа
     начинаются с той же высоты, что строка. */
  .tday-body > .tzline-slot > .tzline {
    grid-column: 1;
    grid-row: 1;
  }

  .tday-body:has(> .tzline-slot > .tzline) > .tday-track {
    grid-row: 2;
  }

  .tday-body:has(> .tzline-slot > .tzline) > .thoughts {
    grid-row: 1 / span 2;
  }

  /* «Прогресс»: итог и плитки во всю ширину, плитки — четыре в ряд; карты —
     в две колонки: категории рядом с «ритмом закрытий». */
  .screen:has(> .pg-track) {
    max-width: calc(1120px + 2 * var(--space-5) + var(--nav-w));
  }

  .pg-pane > .tday-body {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
    align-items: start;
    gap: var(--space-4);
  }

  .pg-pane > .tday-body > .pg-total,
  .pg-pane > .tday-body > .pg-tiles {
    grid-column: 1 / -1;
  }

  .pg-tiles {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  /* Страница задачи: поля — колонкой 360 px справа от описания и прилипают при
     прокрутке длинного описания и обсуждения. Окно карточки не трогаем: оно
     узкое (E6), и там карты идут стопкой. */
  .screen:has(> .tday-body > .card > .props) {
    max-width: calc(640px + 360px + var(--space-5) + 2 * var(--space-5) + var(--nav-w));
  }

  .screen > .tday-body:has(> .card > .props) {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 360px;
    align-items: start;
    column-gap: var(--space-5);
  }

  .screen > .tday-body:has(> .card > .props) > * {
    grid-column: 1;
  }

  .screen > .tday-body > .card:has(> .props) {
    grid-column: 2;
    grid-row: 1 / span 10;
    position: sticky;
    top: var(--space-4);
  }

  /* Задача с доски и «Дня» — панелью справа во всю высоту (E6): узкой
     шторкой снизу она закрывала середину колонок. Слева видна доска под
     лёгким затемнением — щелчок по нему закрывает окно, как и раньше. */
  .modal-back {
    justify-content: flex-end;
    align-items: stretch;
    background: rgba(12, 16, 12, 0.24);
  }

  .modal-back > .sheet-page {
    width: 480px;
    max-height: none;
    border-radius: 0;
    animation: sheet-in-right var(--dur-2) var(--ease);
  }

  .modal-back > .sheet-page.is-closing {
    transform: translateX(100%);
  }

  .modal-back .modal-handle {
    display: none;
  }
}

@keyframes sheet-in-right {
  from { transform: translateX(100%); }
  to { transform: none; }
}

/* 1000–1199 px (E8, ritm#315): боковая полоса сворачивается до значков —
   64 px вместо 232: на 1024 она съедала четверть ширины, и доска с календарём
   теснились. Подписи остаются для диктора и всплывают подсказкой (title у
   пункта); пространство — тем же знаком, что у раскрытой, и «+N» рядом.

   Шире 1200 полосу складывает кнопка (ritm#418) — тем же видом, блок ниже
   повторяет эти правила для .tabbar.is-folded: правка вида — в обоих. Здесь
   кнопки нет: полоса и так значками.

   По вертикали значки стоят там же, где пункты раскрытой полосы (ritm#458):
   меняется только ширина. Поля сверху и снизу — те же 24 px, знак пространства
   того же размера: при 20 px и знаке 32 px всё верхнее прыгало на 4 px вверх,
   нижнее — на 4 px вниз, значок людей — на 8. */
@media (min-width: 1000px) and (max-width: 1199px) {
  :root {
    --nav-w: 64px;
  }

  .nav-fold {
    display: none;
  }

  .tabbar {
    align-items: center;
    padding-inline: var(--space-2);
  }

  .nav-brand {
    padding: 0;
  }

  .nav-name,
  .tab-label,
  .nav-space-btn .pick-value,
  .nav-space-name {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    white-space: nowrap;
  }

  .tab {
    justify-content: center;
    width: 44px;
    padding: 0;
  }

  .nav-foot {
    align-items: center;
  }

  .nav-space-btn,
  .nav-space-one {
    justify-content: center;
    gap: 0;
    width: 44px;
    padding: 0;
    border: 0;
    background: none;
  }

  /* Прячем только стрелку кнопки — прямого потомка. Правило на любой .ic
     прятало и значок людей в углу знака: от него оставался пустой кружок. */
  .nav-space-btn > .ic {
    display: none;
  }

  /* «+N» наезжает на знак, как кружки стопки в шапке, и обведён цветом полосы;
     размер — знака. Значок людей знака лежит поверх (z-index в today.css). */
  .nav-space-btn .nav-space-more {
    display: grid;
    width: 24px;
    height: 24px;
    margin-left: -6px;
    box-shadow: 0 0 0 2px var(--surface);
  }

  /* Строка на всю ширину полосы, а не только её середины: «оффлайн» шире 47 px. */
  .nav-net {
    max-width: calc(100% + 2 * var(--space-2));
    padding: 0;
    text-align: center;
  }
}

/* От 1200 px полосу складывает кнопка «Свернуть панель» (ritm#418): класс
   is-folded на полосе ставит сервер по куке устройства и nav.js при нажатии.
   Место под полосу — та же переменная --nav-w: по ней отступают экран, панель
   захвата, тост и шторки, и освободившуюся ширину занимает экран. Класс стоит
   на самой полосе, а она в разметке после экрана, поэтому переменную ставит
   корень, в котором такая полоса есть; пока полоса не дошла — пометка корня по
   той же куке (theme.js), иначе на медленной загрузке экран вставал шире.

   Полоса складывается и раскрывается плавно (ritm#485). Поэтому сложенная здесь
   — не другая раскладка, как у полосы значками на 1000–1199 (блок выше), а та же
   строкой, что у раскрытой: меняются только величины, которые умеют меняться
   плавно. Ширина — переменная --nav-w (@property в начале файла), и в том же
   темпе едут экран, панель захвата и тост. Поля полосы и пунктов сужаются так,
   что марка, значки и знак пространства встают туда же, где они у полосы
   значками, — коробки в конце те же до пикселя. Подписи в одну строку и
   гаснут, лишнее срезает край полосы; высота ни у чего не меняется. */
@media (min-width: 1200px) {
  :root:has(> body > .tabbar.is-folded),
  :root[data-nav="folded"]:not(:has(> body > .tabbar)) {
    --nav-w: 64px;
  }

  .tabbar {
    overflow-x: hidden;
  }

  .tabbar :is(.nav-name, .tab-label, .nav-space-btn .pick-value, .nav-space-name) {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
  }

  /* «+N» у знака — вне потока, в 18 px правее знака (наезжает на 6 px): так он
     едет вместе со знаком и не толкает подпись. У раскрытой погашен — число
     говорит подпись. */
  .nav-space-btn {
    position: relative;
  }

  .nav-space-btn .nav-space-more {
    display: grid;
    position: absolute;
    top: calc(50% - 12px);
    left: calc(var(--space-3) + 18px);
    width: 24px;
    height: 24px;
    box-shadow: 0 0 0 2px var(--surface);
    opacity: 0;
  }

  /* Строка связи сдвигается, а не перескакивает: у раскрытой — от поля пункта,
     у сложенной — серединой по середине полосы. */
  .nav-net {
    position: relative;
    align-self: flex-start;
    left: var(--space-3);
    max-width: calc(100% - var(--space-3));
    padding: 0;
  }

  /* Сложенная: 64 − 1 (рамка) − 44 (пункт) = 19, по 9,5 px с боков. */
  .tabbar.is-folded {
    padding-inline: 9.5px;
  }

  /* Марка 32 px по середине: 9,5 + 6 = 15,5. */
  .tabbar.is-folded .nav-brand {
    padding-left: 6px;
  }

  /* Значок 24 px по середине пункта 44: 9,5 + 10 = 19,5. */
  .tabbar.is-folded .tab {
    padding-left: 10px;
  }

  .tabbar.is-folded :is(.nav-name, .tab-label, .nav-space-btn .pick-value, .nav-space-name, .nav-space-btn > .ic) {
    opacity: 0;
  }

  /* Знак пространства по середине кнопки 44: рамка остаётся, но прозрачной, —
     1 + 9 = 10; со «+N» по середине пара 24 + 18: поле 0. */
  .tabbar.is-folded :is(.nav-space-btn, .nav-space-one) {
    padding-left: 9px;
    border-color: transparent;
    background-color: transparent;
  }

  .tabbar.is-folded .nav-space-btn:has(.nav-space-more) {
    padding-left: 0;
  }

  .tabbar.is-folded .nav-space-btn .nav-space-more {
    left: 18px;
    opacity: 1;
  }

  /* Середина строки — на середине пункта (44 / 2), ширина — до всей полосы без
     рамки (44 + 19): «оффлайн» шире пункта. */
  .tabbar.is-folded .nav-net {
    left: 22px;
    max-width: calc(100% + 19px);
    transform: translateX(-50%);
  }

  /* Стрелка на значке показывает, куда уедет полоса: у сложенной — вправо. */
  .tabbar.is-folded .nav-fold .ic-dir {
    transform: scaleX(-1);
    transform-box: fill-box;
    transform-origin: center;
  }
}

/* Движение (ritm#485) — только после нажатия кнопки: класс nav-anim ставит на
   корень nav.js. Страница, пришедшая сложенной, встаёт сразу, без езды, даже
   если браузер посчитал стиль до того, как дошла полоса. Всё в одном темпе
   (--dur-2): ширина, поля и сдвиги — иначе значки ехали бы вразнобой с краем.
   Подписи гаснут сразу, пока им есть место, и проявляются с задержкой, когда
   полоса уже почти раскрылась (темп --ease быстрый в начале); «+N» — наоборот. Подпись самой кнопки при
   сворачивании гаснет сразу: nav.js меняет её на «Развернуть панель» в момент
   нажатия, и смена слова не должна быть видна. «Уменьшить движение» — без
   езды. */
@media (min-width: 1200px) and (prefers-reduced-motion: no-preference) {
  :root.nav-anim {
    transition: --nav-w var(--dur-2) var(--ease);
  }

  .nav-anim .tabbar {
    transition: padding var(--dur-2) var(--ease);
  }

  .nav-anim .tabbar .nav-brand {
    transition: padding var(--dur-2) var(--ease);
  }

  .nav-anim .tabbar .tab {
    transition: background var(--dur-1) var(--ease), padding var(--dur-2) var(--ease);
  }

  .nav-anim .tabbar :is(.nav-space-btn, .nav-space-one) {
    transition: padding var(--dur-2) var(--ease), border-color var(--dur-2) var(--ease), background-color var(--dur-2) var(--ease);
  }

  .nav-anim .tabbar .nav-net {
    transition: left var(--dur-2) var(--ease), transform var(--dur-2) var(--ease), max-width var(--dur-2) var(--ease);
  }

  .nav-anim .tabbar :is(.nav-name, .tab-label, .nav-space-btn .pick-value, .nav-space-name, .nav-space-btn > .ic) {
    transition: opacity var(--dur-1) var(--ease) calc(var(--dur-1) / 2);
  }

  .nav-anim .tabbar.is-folded :is(.nav-name, .tab-label, .nav-space-btn .pick-value, .nav-space-name, .nav-space-btn > .ic) {
    transition: opacity var(--dur-1) var(--ease);
  }

  .nav-anim .tabbar.is-folded .nav-fold .tab-label {
    transition: none;
  }

  .nav-anim .tabbar .nav-space-btn .nav-space-more {
    transition: left var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease);
  }

  .nav-anim .tabbar.is-folded .nav-space-btn .nav-space-more {
    transition: left var(--dur-2) var(--ease), opacity var(--dur-1) var(--ease) var(--dur-1);
  }
}

@media (min-width: 900px) {
  .files-grid {
    grid-template-columns: repeat(6, 1fr);
  }
}
}