/*
 * app.css — слой Time Recorder поверх ds-fewbase.css: шрифты, каркас
 * страницы и компоненты приложения. Правила дизайн-системы сюда не
 * копировать — их место в ds-fewbase.css, который заменяется целиком.
 *
 * Шрифты лежат локально, а не тянутся с CDN (решение этапа 3a). В отличие
 * от прежних Barlow/Barlow Condensed, у IBM Plex Sans и JetBrains Mono
 * есть кириллические подмножества — русский текст больше не падает в
 * системный шрифт. Кэш на год задаёт public/_headers.
 */

@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("fonts/ibm-plex-sans-600-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("fonts/jetbrains-mono-400-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("fonts/jetbrains-mono-500-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-cyrillic.woff2") format("woff2");
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "JetBrains Mono";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("fonts/jetbrains-mono-700-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

html {
  background: var(--bg, #f2f2ee);
}

body {
  margin: 0;
}

.ds-fewbase {
  min-height: 100vh;
}

/* ── Каркас страницы ── */

.ds-fewbase .topbar {
  padding: 12px 24px;
  gap: 22px;
}

.ds-fewbase .topbar .nav {
  gap: 22px;
  flex: 1;
}

/* Знак продукта в шапке — рядом со словомаркой, как у витрины платформы. */
.ds-fewbase .brand-mark {
  display: block;
}

/* Знак, название и бейдж тарифа — одна группа со своим внутренним
   зазором (9px, тот же, что внутри .nav-brand), отдельная от общего
   зазора между пунктами шапки (22px, .topbar .nav) — иначе бейдж
   отъезжал бы от названия дальше, чем от соседней вкладки. */
.ds-fewbase .brand-group {
  display: inline-flex;
  align-items: center;
  gap: 9px;
}

/* Контурный тег без заливки и точки — DS-компонент .badge (плотная
   плашка со светлым фоном) читался на тёмной полосе шапки чужеродным
   пятном. Здесь легче: только буквы и тонкая рамка, тон в цвет своей
   роли.

   Селектор несёт лишний класс `.nav` не для вложенности, а ради
   специфичности: бейдж свободного тарифа — ссылка (`<a>`), и без этого
   `.ds-fewbase .nav a` (ниже, паддинг и размер пунктов меню) её обгонял бы
   по специфичности и раздувал бы плашку до размера обычного пункта шапки
   — бейдж тарифа Pro (`<span>`, того же правила не касается) и бейдж
   Free выглядели бы разного размера. */
.ds-fewbase .nav .plan-badge {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 6px;
  border: 1px solid;
}

.ds-fewbase .plan-badge-pro {
  color: var(--accent);
  border-color: var(--accent);
}

.ds-fewbase .plan-badge-free {
  color: var(--topbar-fg-soft);
  border-color: var(--topbar-fg-soft);
}

.ds-fewbase a.plan-badge-free:hover {
  color: var(--accent);
  border-color: var(--accent);
  text-decoration: none;
}

/* Счётчик идущей задачи: акцентный, чтобы находиться взглядом сразу. */
.ds-fewbase .topbar-timer {
  display: inline-flex;
  align-items: baseline;
  gap: var(--s-2);
  padding-left: var(--s-4);
  margin-left: auto;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  white-space: nowrap;
}

.ds-fewbase .topbar-timer-task::before {
  content: "· ";
}

.ds-fewbase .topbar-timer-task {
  color: var(--topbar-fg-soft);
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 22ch;
}

/* Форма выхода не должна ломать строку навигации. */
.ds-fewbase .nav form {
  display: inline-flex;
  margin: 0;
}

.ds-fewbase .nav form .btn {
  border: 0;
  background: none;
  padding: 5px 10px;
  color: var(--accent);
  font-size: 11.5px;
}

.ds-fewbase .nav form .btn:hover {
  background: none;
  text-decoration: underline;
}

/* Пункты навигации — плитки; текущий вывернут в светлое. */
.ds-fewbase .nav a,
.ds-fewbase .nav .nav-current {
  padding: 5px 10px;
  font-family: var(--font-mono);
  font-size: 11.5px;
}

.ds-fewbase .nav-current {
  background: var(--bg);
  color: var(--text);
  letter-spacing: normal;
  text-transform: none;
  font-weight: 500;
}

.ds-fewbase .user-email {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--topbar-fg-soft);
  margin-left: auto;
  white-space: nowrap;
}

.ds-fewbase .wrap {
  max-width: 1180px;
  margin: 0 auto;
  padding: var(--s-5) var(--s-5) var(--s-7);
  display: flex;
  flex-direction: column;
  gap: var(--s-6);
}

/*
 * Экран задач — две колонки: работа слева, журнал справа. Журнал здесь не
 * итог страницы, а зеркало происходящего слева: запуск задачи и правка
 * записи видны одновременно, без прокрутки.
 */
.ds-fewbase .wrap-split {
  display: grid;
  grid-template-columns: 1.25fr 1fr;
  gap: var(--s-5);
  align-items: start;
}

.ds-fewbase .col-tasks,
.ds-fewbase .col-journal {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
  min-width: 0;
}

/* Заголовок блока: имя слева, тихая цифра или пояснение справа. */
.ds-fewbase .list-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  border-bottom: 1px solid var(--text);
  padding-bottom: var(--s-2);
}

.ds-fewbase .list-head h2 {
  font-size: 14px;
}

.ds-fewbase .list-head .text-muted {
  font-family: var(--font-mono);
  font-size: 11px;
}

/* Форма новой задачи — карточка: она же фильтр списка, и рамка отделяет
   «что я задаю» от «что мне показали». */
.ds-fewbase .task-form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-3) var(--s-4);
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.ds-fewbase .task-form-card .list-head {
  border-bottom: 0;
  padding-bottom: 0;
}

.ds-fewbase .wrap-narrow {
  max-width: 560px;
}

.ds-fewbase .wrap > section > h3 {
  margin-bottom: var(--s-4);
}

/* ── Формы ── */

.ds-fewbase form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  margin: 0;
}

.ds-fewbase .field-row {
  display: flex;
  gap: var(--s-2);
  align-items: flex-end;
}

.ds-fewbase .field-row .field {
  flex: 1;
}

.ds-fewbase .form-actions {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-wrap: wrap;
}

.ds-fewbase .form-actions .btn {
  align-self: flex-start;
}

/* Имя и проект рядом, тэги с кнопкой — строкой ниже. */
.ds-fewbase .form-grid {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: var(--s-3);
  align-items: start;
}

/* ── Поле тэгов (прототип 2p) ──
   Метка стоит в строку слева, чипы — тёмные плашки с крестиком, а поле
   ввода превращается в пунктирное приглашение «+ тэг»: общей рамки у
   группы нет, её роль играет карточка формы. Правила висят на самом поле,
   а не на форме создания: в правке задачи и в фильтре отчёта это тот же
   элемент, и выглядеть он обязан так же. */
.ds-fewbase .tags-field {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
}

.ds-fewbase .tags-field .suggest {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: var(--s-3);
  flex: 1;
  min-width: 0;
}

.ds-fewbase .tags-field .suggest > label {
  white-space: nowrap;
}

.ds-fewbase .tags-field .control {
  border: 0;
  background: none;
  padding: 0;
  gap: var(--s-2);
}

.ds-fewbase .tags-field .control:focus-within {
  box-shadow: none;
  background: none;
}

.ds-fewbase .tags-field .chip {
  background: var(--n-900);
  border-color: var(--n-900);
  color: var(--n-200);
  font-size: 11px;
  padding: 3px 8px;
}

.ds-fewbase .tags-field .chip button {
  color: var(--n-500);
}

.ds-fewbase .tags-field .chip button:hover {
  color: var(--n-200);
}

.ds-fewbase .tags-field .control-text {
  border: 1px dashed var(--line-strong);
  padding: 3px 8px;
  font-size: 11px;
  min-width: 7rem;
  flex: 0 1 auto;
}

.ds-fewbase .tags-field .control-text:focus-visible {
  border-style: solid;
  border-color: var(--text);
  background: var(--surface-focus);
}

/* Кнопка встаёт вровень с полем тэгов: подсказка вынесена под группу
   (см. NewTask), поэтому низ поля и низ кнопки совпадают. */
.ds-fewbase .form-tail {
  display: flex;
  align-items: center;
  gap: var(--s-3);
}

.ds-fewbase .form-tail .tags-field {
  flex: 1;
  min-width: 0;
}

/* Форма новой задачи — она же фильтр списка: отдельная карточка сверху. */
.ds-fewbase .task-form {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-4) var(--s-5);
  gap: var(--s-3);
}

/* ── Поле с подсказками (Suggest) ── */

/* Рамку рисует обёртка, а не само поле: внутри неё живут плашки тэгов и
   крестик очистки — вместе они должны читаться одним контролом. */
.ds-fewbase .control {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-1);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  padding: 4px 6px;
}

.ds-fewbase .control:focus-within {
  border-color: var(--text);
  background: var(--surface-focus);
  box-shadow: 0 0 0 2px var(--a-200);
}

.ds-fewbase .control-text {
  flex: 1;
  min-width: 6rem;
  border: 0;
  background: none;
  padding: 4px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--text);
}

.ds-fewbase .control-text:focus-visible {
  outline: none;
  box-shadow: none;
}

.ds-fewbase .control-clear {
  border: 0;
  background: none;
  color: var(--text-muted);
  font-family: var(--font-mono);
  cursor: pointer;
  padding: 2px 6px;
}

.ds-fewbase .control-clear:hover {
  color: var(--danger);
  background: none;
}

.ds-fewbase .suggest {
  position: relative;
}

/*
 * Список подсказок всплывает НАД разметкой, а не раздвигает её: в панели
 * отчёта он стоял в потоке и на каждый ввод сдвигал даты и кнопку вниз —
 * строка панели прыгала под курсором.
 */
.ds-fewbase .suggest > [role="listbox"] {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  z-index: 20;
  margin-top: 2px;
  padding: 0;
  list-style: none;
  max-height: 14rem;
  overflow-y: auto;
  box-shadow: var(--sh-2);
}

/* Список подсказок — не всплывающий слой на JS, а обычный блок под полем. */
.ds-fewbase .suggest > .btn {
  border-radius: 0;
  border-color: var(--line);
  text-align: left;
  font-size: 12px;
}

.ds-fewbase .suggest > .btn + .btn {
  border-top: 0;
}

/* ── Плашки проекта и тэгов ── */

.ds-fewbase .chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 10.5px;
  border: 1px solid var(--line);
  color: var(--text-soft);
  padding: 1px 6px;
}

/* Проект отличается от тэгов заливкой, а не только порядком (этап 3f). */
.ds-fewbase .chip-project {
  border-color: var(--a-300);
  color: var(--a-700);
  background: var(--a-100);
}

/* Имя внутри плашки обрезается многоточием: длинное название переносилось
   на вторую строку и растило плашку по высоте, ломая строку панели. */
.ds-fewbase .chip-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Бейдж «+N»: скрытые плашки за одним нажатием. Пунктиром, чтобы читался
   приглашением раскрыть, а не ещё одним тэгом. */
.ds-fewbase .chip-more {
  border-style: dashed;
  border-color: var(--line-strong);
  background: none;
  color: var(--text-muted);
  cursor: pointer;
}

.ds-fewbase .chip-more:hover {
  border-style: solid;
  color: var(--text);
}

.ds-fewbase .chip-archived {
  color: var(--text-muted);
  border-style: dashed;
}

.ds-fewbase .chip button {
  border: 0;
  background: none;
  color: var(--text-muted);
  cursor: pointer;
  padding: 0;
  font-family: var(--font-mono);
}

.ds-fewbase .chip button:hover {
  color: var(--danger);
}

/* ── Список задач ── */

/* Сброс маркеров обязателен: без него ul несёт браузерный padding-left в
   40 px, и строки стоят с отступом от собственной рамки списка. */
.ds-fewbase .task-list,
.ds-fewbase .journal-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.ds-fewbase .task-list {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
}

/*
 * Строка задачи — сетка «что делаю | сколько | чем управляю». Флексом это
 * жило до двух колонок: в узкой колонке имя и кнопки начинали делить одну
 * строку и наезжать друг на друга.
 */
.ds-fewbase .task {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  column-gap: var(--s-4);
  row-gap: 2px;
  padding: 8px 12px;
  border-top: 1px solid var(--line-soft);
}

.ds-fewbase .task-main {
  grid-column: 1;
  grid-row: 1;
}

/* Статистика — отдельной строкой во всю ширину под именем и кнопками:
   в колонке она не помещалась и ломалась надвое. */
.ds-fewbase .task-times {
  grid-column: 1 / -1;
  grid-row: 2;
}

.ds-fewbase .task-acts {
  grid-column: 2;
  grid-row: 1;
}

.ds-fewbase .task-list > .task:first-child {
  border-top: 0;
}

/*
 * Идущая задача — единственное место с акцентной рамкой на весь блок. Она
 * выступает на пиксель за края списка и накрывает его рамку собой: иначе
 * рядом стоят две линии, а правило «первой строке без верхней границы»
 * срезает верх именно у неё.
 */
.ds-fewbase .task-active {
  border: 1px solid var(--accent);
  background: var(--accent-tint);
  margin: -1px;
  position: relative;
}

.ds-fewbase .task-list > .task-active:first-child {
  border-top: 1px solid var(--accent);
}

.ds-fewbase .task-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.ds-fewbase .task-name {
  display: flex;
  align-items: center;
  gap: var(--s-2);
  flex-wrap: wrap;
  font-family: var(--font-mono);
  font-size: 13px;
}

.ds-fewbase .task-active .task-name {
  font-size: 14px;
  font-weight: 700;
}

/* «сегодня … · всего … · начато в …» читается одной фразой: разделитель
   рисует CSS, чтобы разметка не носила его отдельным узлом. Ставится ПОСЛЕ
   элемента, а не перед следующим: при переносе он остаётся в конце строки,
   а не повисает в начале новой. */
.ds-fewbase .task-times > *:not(:last-child)::after {
  content: " ·";
  color: var(--n-500);
}

.ds-fewbase .task-times {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  white-space: nowrap;
}

.ds-fewbase .task-acts {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  flex-shrink: 0;
}

/* Живой счётчик идущей задачи — самое крупное число экрана. */
.ds-fewbase .task-active .num {
  font-size: 20px;
  font-weight: 700;
  color: var(--a-700);
  line-height: 1.1;
}

.ds-fewbase .task-acts {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  white-space: nowrap;
}

/* Счётчик — самое крупное, что есть в строке: на него и смотрят. */
.ds-fewbase .task-clock {
  font-size: 20px;
  font-weight: 700;
  color: var(--a-700);
}

/* Имя задачи переносится, а не растягивает строку до горизонтальной
   прокрутки: колонка задач уже, чем страница целиком. */
.ds-fewbase .task-name {
  overflow-wrap: anywhere;
}

/* Свёрнутый блок давних задач. */
.ds-fewbase .stale > summary {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--text-muted);
  cursor: pointer;
  padding: var(--s-2) 0;
}

.ds-fewbase .stale[open] > summary {
  margin-bottom: var(--s-2);
}

/* ── Журнал ── */

.ds-fewbase .journal {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

/*
 * День журнала — единый блок в рамке: заголовок-плашка сверху, записи под
 * ним. Раньше заголовок стоял НАД блоком с подчёркиванием, и день выглядел
 * не карточкой, а разделом страницы.
 */
.ds-fewbase .journal-day {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  background: var(--surface);
}

.ds-fewbase .journal-day-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 8px 12px;
  background: var(--n-300);
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.ds-fewbase .journal-day-name {
  font-weight: 700;
}

/* Рамку и фон несёт сам день — списку они больше не нужны. */
.ds-fewbase .journal-list {
  display: flex;
  flex-direction: column;
}

/*
 * Запись журнала — сетка: интервал слева, задача с заметкой в середине,
 * длительность справа, действия под ней. Одной строкой это не умещается в
 * колонку журнала, а перенос флексом ставил заметку поверх имени задачи.
 */
.ds-fewbase .entry {
  display: grid;
  grid-template-columns: 104px minmax(0, 1fr) max-content;
  column-gap: var(--s-3);
  row-gap: 2px;
  align-items: baseline;
  padding: 7px 12px;
  border-top: 1px solid var(--line-soft);
}

.ds-fewbase .entry-task {
  grid-column: 2;
  grid-row: 1;
}

.ds-fewbase .entry-memo {
  grid-column: 2;
  grid-row: 2;
}

.ds-fewbase .entry-duration {
  grid-column: 3;
  grid-row: 1;
  text-align: right;
}

.ds-fewbase .entry-acts {
  grid-column: 3;
  grid-row: 2;
  justify-self: end;
}

.ds-fewbase .journal-list > .entry:first-child {
  border-top: 0;
}

.ds-fewbase .entry-hidden {
  opacity: 0.55;
}

.ds-fewbase .entry-task {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.ds-fewbase .entry-memo {
  font-size: 12px;
  color: var(--text-muted);
}

.ds-fewbase .entry-acts {
  display: flex;
  gap: var(--s-2);
}

.ds-fewbase .entry-time,
.ds-fewbase .entry-duration {
  font-family: var(--font-mono);
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.ds-fewbase .entry-duration {
  color: var(--text-muted);
}




/*
 * Строка в правке — та же строка, а не форма поверх журнала: подсветка
 * показывает, какая именно запись открыта, а поля стоят там же, где стояли
 * их значения. Сетку строки при этом ломаем: датам нужно вдвое больше
 * места, чем занимал интервал текстом.
 */
.ds-fewbase .entry-form {
  display: block;
  padding: 10px 12px;
  border-top: 1px solid var(--line-soft);
  background: var(--accent-tint);
  box-shadow: inset 2px 0 0 var(--accent);
}

.ds-fewbase .entry-form form {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

/* Начало и конец — рядом: это один интервал, а не два независимых поля. */
.ds-fewbase .entry-form .field-row {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-2);
}

.ds-fewbase .entry-form .field-row .field {
  flex: 1 1 10rem;
}

.ds-fewbase .entry-form .input {
  font-size: 12px;
  padding: 5px 8px;
}

.ds-fewbase .entry-form textarea.input {
  min-height: 2.4rem;
}

.ds-fewbase .entry-form .form-actions {
  gap: var(--s-2);
}

.ds-fewbase .entry-form .form-actions .btn {
  font-size: 11.5px;
  padding: 5px 12px;
}

/* ── Справочник проектов и тэгов ──
   Две карточки рядом: проекты и тэги — списки одного рода, и держать их
   друг под другом значило прокручивать страницу ради второго. */
.ds-fewbase .labels-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-5);
  align-items: start;
}

.ds-fewbase .label-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-4);
}

/* Заголовок карточки держит тот же отступ, что строки: иначе «Тэги» и
   счётчик стояли бы левее и правее всего списка. */
.ds-fewbase .label-card .list-head {
  border-bottom: 0;
  padding: 0 6px;
}

.ds-fewbase .label-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
}

/* Строка справочника: имя, время, действия — три части одной строки. */
/*
 * Боковой отступ есть у КАЖДОЙ строки, а не только у подсвеченной: он даёт
 * содержимому подсветки воздух до края, но если добавить его одной строке,
 * её имя съедет относительно соседних.
 */
.ds-fewbase .label-row {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 7px 6px;
  border-top: 1px solid var(--line-soft);
}

.ds-fewbase .label-list > .label-row:first-child {
  border-top: 0;
}

.ds-fewbase .label-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
  overflow-wrap: anywhere;
}

.ds-fewbase .label-chip {
  background: var(--n-900);
  border-color: var(--n-900);
  color: var(--n-200);
  font-size: 11px;
  padding: 3px 8px;
}

.ds-fewbase .label-total {
  font-size: 11.5px;
  color: var(--text-muted);
}

/* Строка в подтверждении удаления: бледный красный фон, вопрос красным и
   залитая кнопка — три признака того, что дальше необратимое. */
/* Горизонтальных отступов нет намеренно: содержимое обязано стоять ровно
   под соседними строками, а фон и так растянут на всю ширину строки. */
.ds-fewbase .label-row-danger {
  background: var(--red-bg);
}

.ds-fewbase .label-question {
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--red-fg);
}

.ds-fewbase .label-chip-muted {
  background: var(--grey);
  border-color: var(--grey);
}

/* Подтверждение — единственная кнопка с заливкой опасного цвета: у обычной
   .btn-danger заливка появляется лишь под курсором, а здесь она и есть
   предупреждение. Имя и цвета — те же, что в infra-tracker: одна и та же по
   смыслу кнопка не должна называться в двух продуктах по-разному. */
.ds-fewbase .btn-danger-solid {
  background: var(--danger);
  border-color: var(--danger-700);
  color: var(--surface-focus);
}

.ds-fewbase .btn-danger-solid:hover {
  background: var(--danger-700);
  border-color: var(--danger-700);
  color: var(--surface-focus);
}

/* Размер — от места, а не от кнопки: подтверждение стоит В СТРОКЕ
   справочника, где весь текст 11.5px, и кнопка полного размера распирала бы
   строку. У infra та же кнопка живёт на отдельной странице и остаётся
   обычного размера. */
.ds-fewbase .label-row .btn-danger-solid {
  font-weight: 700;
  padding: 4px 10px;
  font-size: 11.5px;
}

/* Действия прижаты вправо и набраны ссылками: их три на строку, и рамки
   превратили бы справочник в панель инструментов. */
.ds-fewbase .label-acts {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  margin-left: auto;
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ds-fewbase .labels-split {
    grid-template-columns: 1fr;
  }
}

/* ── Справочник проектов и тэгов ── */

/*
 * Класс носят две разные вещи: список справочника (ul на экране «Проекты и
 * тэги») и набор чипов в строке задачи (span). Столбец — только списку:
 * чипы обязаны идти в ряд, иначе строка задачи растёт на каждый тэг.
 */
.ds-fewbase ul.labels {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
}

.ds-fewbase span.labels {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-2);
}

.ds-fewbase ul.labels > li {
  display: flex;
  align-items: center;
  gap: var(--s-3);
  padding: 8px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.ds-fewbase ul.labels > li > :first-child {
  flex: 1;
}

/* ── Отчёт ── */

/* Панель среза — карточка в одну строку: период, чем сузить, что сделать. */
.ds-fewbase .report-screen {
  display: flex;
  flex-direction: column;
  gap: var(--s-4);
}

.ds-fewbase .report-bar .input,
.ds-fewbase .report-bar .control {
  font-size: 12px;
  padding: 5px 8px;
}

.ds-fewbase .report-bar .control-text {
  font-size: 12px;
}

.ds-fewbase .report-bar {
  display: flex;
  /* Направление задаётся явно: общее правило форм ставит column, и с ним
     align-items: flex-end прижимал всю панель к правому краю. */
  flex-direction: row;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: var(--s-4);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-3);
}

.ds-fewbase .report-bar-fields {
  display: flex;
  gap: var(--s-3);
}

/* Поля дат — по содержимому: во всю ширину они выглядели полосой, хотя в
   них всего десять знаков. */
.ds-fewbase .report-bar-fields .input {
  width: auto;
  min-width: 8rem;
}

/* Поля среза не растягиваются во всю оставшуюся ширину: плашкам столько не
   нужно, а панель от этого выглядит пустой. */
.ds-fewbase .report-bar-filters .tags-field,
.ds-fewbase .report-bar-filters .suggest {
  min-width: 12rem;
  max-width: 18rem;
}

/*
 * Плашки и поле ввода — одна строка внутри рамки: без запрета переноса
 * плашки вставали НАД полем, ряд за рядом, и панель разъезжалась по высоте.
 * Свёртка «+N» держит их число небольшим, поэтому переносить нечего.
 */
.ds-fewbase .report-bar-filters .control {
  flex-wrap: nowrap;
  overflow: hidden;
}

/* В узкой ячейке панели плашка занимает не больше трети её ширины —
   остальное имя уходит в многоточие. */
.ds-fewbase .report-bar-filters .chip {
  max-width: 7rem;
  flex-shrink: 1;
}

.ds-fewbase .report-bar-filters .control-text {
  min-width: 3rem;
}

.ds-fewbase .report-bar-filters {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-4);
  flex: 1;
  min-width: 0;
}

/*
 * Строка выгрузок. Раньше правила не было вовсе — там стояла ОДНА ссылка, и
 * абзаца хватало. Кнопок стало две (PDF и CSV), а JSX между соседними
 * элементами перевод строки съедает: без своего зазора плашки слиплись бы в
 * одну. Отсюда flex с gap, а не пробел в разметке, который легко потерять.
 *
 * wrap — потому что на месте кнопок бывает текст: отсчёт получаса или
 * объяснение про предел периода, и в узком окне ему нужна вторая строка.
 */
.ds-fewbase .report-download {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-3);
}

/*
 * В панели отчёта метка стоит НАД полем, как у дат, а не сбоку: сбоку она
 * отъедает ширину у самих плашек, а их тут может быть много. В форме задачи
 * наоборот — там строка одна и метка в ней экономит высоту.
 */
.ds-fewbase .report-bar-filters .tags-field,
.ds-fewbase .report-bar-filters .suggest {
  flex-direction: column;
  align-items: stretch;
  gap: var(--s-1);
}

.ds-fewbase .report-bar-actions {
  display: flex;
  gap: var(--s-2);
  margin-left: auto;
}

/* Разбивка слева, итог справа: за итогом приходят чаще, чем за разбивкой. */
.ds-fewbase .report-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 18rem;
  gap: var(--s-4);
  align-items: start;
}

.ds-fewbase .report-summary {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  background: var(--surface);
  border: 1px solid var(--line);
  padding: var(--s-4);
}

.ds-fewbase .report-summary-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
}

.ds-fewbase .report-task-entries {
  white-space: nowrap;
}

@media (max-width: 700px) {
  .ds-fewbase .report-split {
    grid-template-columns: 1fr;
  }

  .ds-fewbase .report-bar-actions {
    margin-left: 0;
  }

  /*
   * На узком экране панель складывается в колонку: даты, срез и кнопка идут
   * друг под другом во всю ширину.
   *
   * Без этого панель вылезала за край окна. Причина не в самих полях среза,
   * а в соседе: `.report-bar-fields` (две даты, nowrap, ~270px) занимает
   * почти всю строку и не пускает срез на следующую — тот сжимается до
   * сорока пикселей, а его поля держат `min-width: 12rem` и рисуются мимо
   * окна, растягивая документ по горизонтали.
   *
   * Лечится тем же приёмом, что и форма задач (`.form-tail .tags-field`):
   * полям разрешено сжиматься (`min-width: 0`), а плашки внутри уже умеют
   * уходить в многоточие и свёртку «+N». Предел ширины здесь тоже снимается
   * — он существует, чтобы поле не растягивалось на пустой широкой панели,
   * а на узкой растягиваться не на чем.
   */
  .ds-fewbase .report-bar {
    flex-direction: column;
    /* align-items: flex-end из основного правила в колонке прижимал бы
       содержимое к правому краю. */
    align-items: stretch;
  }

  .ds-fewbase .report-bar-filters .tags-field,
  .ds-fewbase .report-bar-filters .suggest {
    min-width: 0;
    max-width: none;
  }

}


.ds-fewbase .report {
  display: flex;
  flex-direction: column;
  gap: var(--s-5);
}

.ds-fewbase .report-project {
  border: 1px solid var(--line);
  background: var(--surface);
}

.ds-fewbase .report-project-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding: 10px 14px;
  border-bottom: 1px solid var(--text);
  font-family: var(--font-mono);
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.ds-fewbase .report-project-name {
  font-weight: 700;
}

.ds-fewbase .report-task-list {
  display: flex;
  flex-direction: column;
}

/*
 * Строка отчёта — СЕТКА, а не flex с `space-between`.
 *
 * Раньше здесь стоял `justify-content: space-between`, и каждая строка
 * распределяла содержимое по СВОЕЙ ширине: «4 entries» и заметка вставали у
 * каждой задачи на своём месте, тем дальше друг от друга, чем короче имя.
 * Колонок не было вовсе — только видимость, которая держалась, пока имена
 * были примерно одной длины.
 *
 * Сетка на КАЖДОЙ строке, а не одна на список (`display: contents` у строк):
 * строке нужна своя рамка сверху и свои отступы, а `display: contents`
 * снимает коробку вместе с ними. Колонки при этом всё равно совпадают —
 * ширина у всех строк одна, шаблон один, и доли `fr` считаются одинаково.
 *
 * Обязательное условие: у строки ВСЕГДА четыре ячейки. Заметка рисуется даже
 * пустой (см. ReportView) — пропущенная ячейка сдвинула бы часы в её колонку.
 */
.ds-fewbase .report-task {
  display: grid;
  grid-template-columns: minmax(0, 1.6fr) 5.5rem minmax(0, 2fr) 3.5rem;
  align-items: baseline;
  gap: var(--s-3);
  padding: 8px 14px;
  border-top: 1px solid var(--line-soft);
  font-size: 13px;
}

/*
 * Колонки закреплены ЯВНО, а не отданы автораскладке: стоит одной ячейке
 * пропасть (пустая заметка, будущая условная ветка) — и автораскладка
 * сдвинет часы в колонку заметки. Явный номер делает строку устойчивой к
 * этому вне зависимости от того, сколько ячеек нарисовано.
 */
.ds-fewbase .report-task-name {
  grid-column: 1;
}

.ds-fewbase .report-task-entries {
  grid-column: 2;
}

.ds-fewbase .report-task-memo {
  grid-column: 3;
}

/* Числа — по правому краю своей колонки, чтобы читались столбцом. */
.ds-fewbase .report-task > .num {
  grid-column: 4;
  text-align: right;
}

/* Счётчик заходов — тоже к правому краю: он числовой, и вместе с часами
   образует ровную лесенку, а не пляшет по левому краю от длины числа. */
.ds-fewbase .report-task-entries {
  text-align: right;
}

/*
 * Узкий экран. Блок стоит ЗДЕСЬ, а не в общем медиазапросе выше по файлу:
 * тот объявлен раньше базового `.report-task`, специфичность у них равная,
 * и базовые четыре колонки перебивали бы его — области применялись, а
 * колонки нет, отчего имя задачи ужималось до одного слова в строке.
 *
 * Четыре колонки в 375px не живут: имени остаётся полсотни пикселей.
 * Раскладываем строку в три яруса — имя с часами, счётчик заходов,
 * заметка. Часы остаются у правого края, то есть там же, где их ищут
 * глазами в широком макете.
 *
 * Через grid-template-areas, а не просто сменой числа колонок: четыре
 * ячейки в двух колонках разложились бы по порядку следования, и заметка
 * встала бы под именем, а часы — под счётчиком.
 */
@media (max-width: 700px) {
  .ds-fewbase .report-task {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "name    hours"
      "entries entries"
      "memo    memo";
    gap: 2px var(--s-3);
  }

  .ds-fewbase .report-task-name {
    grid-area: name;
  }

  .ds-fewbase .report-task > .num {
    grid-area: hours;
  }

  .ds-fewbase .report-task-entries {
    grid-area: entries;
    text-align: left;
  }

  .ds-fewbase .report-task-memo {
    grid-area: memo;
  }

  /* Пустая заметка не должна занимать ярус. Прячется ТОЛЬКО здесь: на
     широком экране ячейки расставлены по номерам колонок, но display:none
     всё равно убрал бы ячейку из потока, а тут у каждой своя именованная
     область — исчезновение заметки соседей не двигает. */
  .ds-fewbase .report-task-memo:empty {
    display: none;
  }

  /* Отступ списка задач в 40px на узком экране — это десятая часть ширины
     окна, отобранная у имени задачи. Хватает и трети. */
  .ds-fewbase .report-task-list {
    padding-left: var(--s-3);
  }
}

.ds-fewbase .report-task-list > .report-task:first-child {
  border-top: 0;
}

.ds-fewbase .report-task-name {
  font-family: var(--font-mono);
  font-size: 12.5px;
}

.ds-fewbase .report-task-memo {
  font-size: 12px;
  color: var(--text-muted);
}

/* Общий итог — крупная строка под всеми проектами. */
.ds-fewbase .report-total {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  border-top: 1px solid var(--text);
  padding-top: var(--s-3);
  font-family: var(--font-mono);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Тень из прежней системы — единственный её след, нужен карточке отчёта. */
.ds-fewbase .elev-sm {
  box-shadow: var(--sh-1);
}

/* ── Мобильная раскладка ── */

@media (max-width: 700px) {
  .ds-fewbase .topbar {
    flex-wrap: wrap;
    gap: var(--s-2);
    padding: 10px 14px;
  }

  .ds-fewbase .topbar .nav {
    flex-wrap: wrap;
    gap: var(--s-2);
  }


.ds-fewbase .nav-brand {
    font-size: 12px;
  }

  .ds-fewbase .user-email {
    margin-left: 0;
  }

  .ds-fewbase .wrap {
    padding: var(--s-4) var(--s-3) var(--s-6);
    gap: var(--s-5);
  }

  /* Узкому экрану две колонки не нужны — журнал уходит под задачи. */
  .ds-fewbase .wrap-split {
    grid-template-columns: 1fr;
  }

  .ds-fewbase .topbar-timer {
    margin-left: 0;
  }

  /* Строки — сетки, и на узком экране они складываются в одну колонку:
     flex-direction здесь больше ничего не значил бы. */
  .ds-fewbase .task,
  .ds-fewbase .entry {
    grid-template-columns: minmax(0, 1fr);
    row-gap: var(--s-2);
  }

  .ds-fewbase .entry-task,
  .ds-fewbase .entry-memo,
  .ds-fewbase .entry-duration,
  .ds-fewbase .entry-acts {
    grid-column: 1;
    grid-row: auto;
    justify-self: start;
    text-align: left;
  }

  .ds-fewbase .task-times {
    align-items: flex-start;
  }
}


/* — экран настроек —
   Две колонки: слева то, чем распоряжается сам продукт (округление,
   пульт в Telegram), справа — приглушённая карточка личности, которую
   он только показывает. Ставить их друг под другом значило бы выдать
   «часовой пояс» за очередную настройку этой страницы. */
.ds-fewbase .settings-split {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s-4);
  align-items: start;
}

.ds-fewbase .settings-split > .card + .card {
  margin-top: 0;
}

/* Правая колонка идёт второй в потоке, но обе карточки левой стоят одна
   под другой — поэтому колонки задаются явно, а не порядком в разметке. */
.ds-fewbase .settings-split > :nth-child(1),
.ds-fewbase .settings-split > :nth-child(3) {
  grid-column: 1;
}

.ds-fewbase .settings-split > :nth-child(2) {
  grid-column: 2;
  grid-row: 1;
}

.ds-fewbase .settings-split .card-title {
  margin-bottom: var(--s-3);
}

/* Карточка «язык и часовой пояс» — один вид во всех продуктах платформы
   (образец — subscriptions): приглушённая, потому что здесь ничего не
   меняется, правка живёт в кабинете. */
.ds-fewbase .card-quiet {
  background: var(--grey-bg);
  border-color: var(--grey-line);
}

.ds-fewbase .blk-title {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.ds-fewbase .kv-grid {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-6);
  margin-top: var(--s-3);
}

.ds-fewbase .kv-grid p {
  margin-top: 3px;
}

.ds-fewbase .card-quiet .note {
  margin-top: var(--s-3);
}

.ds-fewbase .state-row {
  margin-bottom: var(--s-2);
}

/* Сегментированный выбор шага округления — тот же элемент, что выбор
   языка в кабинете платформы: скрытые радиокнопки, видны подписи. */
.ds-fewbase .seg-field {
  border: 0;
  margin: 0;
  padding: 0;
}

.ds-fewbase .seg {
  display: flex;
  width: fit-content;
  margin-top: var(--s-2);
  border: 1px solid var(--line-strong);
  font-family: var(--font-mono);
  font-size: 12px;
}

.ds-fewbase .seg-opt input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
}

.ds-fewbase .seg-opt span {
  display: block;
  padding: 8px 18px;
  background: var(--surface);
  cursor: pointer;
}

.ds-fewbase .seg-opt + .seg-opt span {
  border-left: 1px solid var(--line-strong);
}

.ds-fewbase .seg-opt input:checked + span {
  background: var(--n-900);
  color: var(--n-200);
}

.ds-fewbase .seg-opt input:focus-visible + span {
  outline: 2px solid var(--a-200);
  outline-offset: -2px;
}

.ds-fewbase .seg-field .field-hint {
  margin-top: var(--s-2);
}

@media (max-width: 700px) {
  .ds-fewbase .settings-split {
    grid-template-columns: 1fr;
  }

  .ds-fewbase .settings-split > :nth-child(1),
  .ds-fewbase .settings-split > :nth-child(2),
  .ds-fewbase .settings-split > :nth-child(3) {
    grid-column: 1;
    grid-row: auto;
  }

  .ds-fewbase .seg {
    width: 100%;
  }

  .ds-fewbase .seg-opt {
    flex: 1;
  }

  .ds-fewbase .seg-opt span {
    padding: 8px 6px;
    text-align: center;
  }
}