/* Liquid Glass — токены и компоненты beta по гайдлайну.
   Правило: сюда только внешний вид. Разметка beta своя; расчёты и API остаются общими.
   Источник решений — design/guideline.html и design/BRIEF.md. */

/* шрифт цифр и все токены (цвет, стекло, тени, радиусы) — в tokens.css: один источник для приложения и гайдлайна */

/* фон приложения: одна лента на все экраны */
/* Фон: палитра-узор из backgrounds.js подменяет --bg-art («Лента» — запасной, пока скрипт не отработал). Картинка — на своём слое под страницей,
   приглушение Б (гайд §4, 24.09) — фильтр --bg-filter только этого слоя: меньше насыщенности и контраста, чуть темнее */
:root{--bg-art:var(--bg-ribbon);--bg-filter:none}
html{background:var(--bg)}
html::before{content:'';position:fixed;inset:calc(var(--bg-soft,0px) * -2);z-index:-1;background:var(--bg-art) center/cover no-repeat;filter:var(--bg-filter);pointer-events:none}
body{background:transparent}

/* цифры — Manrope с табличными цифрами */
.num,.mono,input[type="number"]{font-family:var(--font-num);font-variant-numeric:tabular-nums}

/* ── Вход (L1: карточка по центру) ──────────────────────────────────────── */
.login-overlay{background:transparent;backdrop-filter:none}
.login-card{
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-edge);
  border-radius:26px;
  box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-hi);
}
.login-card .input,.login-card input[type="text"],.login-card input[type="password"]{
  background:var(--surface);border:0;box-shadow:inset 0 0 0 1px var(--border-2);border-radius:var(--radius-md);
}
.login-card .input:focus,.login-card input:focus{box-shadow:inset 0 0 0 2px var(--border-focus);outline:0}
.login-card .btn--primary,.login-card button[type="submit"]{border-radius:var(--radius-pill)}

/* ── Шапка: одна стеклянная панель ──────────────────────────────────────── */
.topbar{
  display:flex;align-items:center;gap:16px;flex-wrap:nowrap;
  height:auto;min-height:0;padding:6px 8px 6px 12px;margin:10px 12px 0;border-radius:var(--radius-lg);
  background:transparent;border:1px solid var(--glass-edge);box-shadow:var(--shadow-md),inset 0 1px 0 var(--glass-hi);
  color:var(--text-primary);position:sticky;top:10px;z-index:40;
}
/* Стекло шапки — на подложке, а не на самой шапке: backdrop-filter у предка отрезает размытие у вложенных
   меню (аватар, «Вне функц.», «+ группа») — они просвечивали насквозь (замечание владельца 24.09). */
.topbar::before{content:'';position:absolute;inset:0;z-index:-1;border-radius:inherit;background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%)}
.topbar-brand{color:var(--text-primary);font-weight:700;font-size:14px;gap:8px}
.topbar-name{font:700 16px/1 var(--font);letter-spacing:-.01em;white-space:nowrap}
.topbar-logo{width:24px;height:24px;border-radius:7px;font-size:14px}

/* вкладки капсулами */
.topbar-nav{flex:0 0 auto;gap:2px;padding:3px;border-radius:var(--radius-pill);background:var(--border)}
.nav-item{padding:4px 13px;border-radius:var(--radius-pill);font-size:13px;font-weight:500;color:var(--text-secondary);background:transparent;border:0}
.nav-item:hover{color:var(--text-primary)}
.nav-item.active{background:var(--surface);color:var(--text-primary);box-shadow:var(--shadow-sm)}

/* часы и дата */
.shift-clock{display:flex;align-items:baseline;gap:8px;white-space:nowrap}
.shift-clock .sh-time{font-size:22px;font-weight:700;letter-spacing:-.02em;line-height:1}
.shift-clock .sh-date{font-size:12.5px;color:var(--text-secondary)}

/* показатели: тихие цифры вместо карточек */
.shift-header__stats{display:flex;gap:14px;margin:0;padding:0;border:0;background:none;flex:0 0 auto;min-width:0}
.shift-header__stats .stat-item{flex:0 0 auto;flex-direction:row;align-items:baseline;gap:5px;padding:0;background:none;border:0;white-space:nowrap}
.shift-header__stats .stat-value{font-family:var(--font-num);font-variant-numeric:tabular-nums;font-size:20px;font-weight:700;line-height:1.2}
.shift-header__stats .stat-label{font-size:11.5px;color:var(--text-tertiary);line-height:1.2}

/* чипы часов: шкала с прямым краем, без обводки, на стекле */
.func-chips{flex:1 1 auto;justify-content:flex-end;gap:6px;min-width:0}
.fc-chip{
  flex-shrink:0;
  padding:5px 12px;border:0;font-size:12.5px;line-height:1.1;
  background:rgba(255,255,255,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--border);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;
}
:root[data-theme="dark"] .fc-chip{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fc-chip{background:rgba(255,255,255,.06)}}
/* наведение — подложка матовая (гайдлайн §5); :root поднимает вес над тёмными фонами чипа */
.fc-chip{transition:background .16s ease-out}
:root .func-chips .fc-chip:hover{background:var(--matte)}
.fc-chip .fc-name{font-family:var(--font);color:color-mix(in srgb,var(--fc-color,var(--text-primary)) 70%,var(--text-primary))}
.fc-chip .fc-plan,.fc-chip .fc-left{color:var(--text-tertiary)}
.fc-fill{border-radius:0;opacity:.26}
.fc-chip--noplan{border:0;box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--border)}
.fc-chip--done{box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--border)}
.fc-chip--done .fc-fill{background:var(--fc-color,var(--success));opacity:.26}
.fc-chip--other{background:rgba(255,255,255,.35)}
/* правка плана прямо в чипе: без чёрной рамки (решение владельца 22.09) — матовая подложка и тонкая граница */
:root .func-chips .fc-chip--editing{border:0;background:var(--matte);box-shadow:inset 0 0 0 1px var(--border-2)}
.fc-inp:focus,.fc-inp:focus-visible{outline:0}
:root[data-theme="dark"] .fc-chip--other{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fc-chip--other{background:rgba(255,255,255,.06)}}

/* правый край */
.topbar-right{gap:8px;flex:0 0 auto}
.topbar-avatar{width:28px;height:28px}
.shift-header__dayoff{order:9}

@container app-viewport (max-width:1180px){
  .topbar{flex-wrap:wrap}
  .func-chips{order:5;flex-basis:100%;justify-content:flex-start}
}

/* шапка в одну строку на 1470: поджимаем вторичное */
.topbar{gap:12px}
.shift-header__stats{gap:10px}
.shift-header__stats .stat-label{font-size:11px}
.fc-chip{gap:6px}
.fc-chip .fc-left{display:none}            /* остаток — в окне правки плана, не в шапке */
/* На компактном desktop уменьшаем отступы, а не ширину цифр и значений чипов. */
@container app-viewport (min-width:1181px) and (max-width:1600px){
  .topbar{gap:8px}
  .fc-chip{padding:5px 8px;gap:4px}
  .fc-chip .fc-name{max-width:44px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
}
/* Чипов больше, чем помещается (выбрана задача группы без плана — у неё свой чип): сжимаются имена групп до первых букв,
   цифры не сжимаются. Раньше чипы уезжали влево под показатели (1470: на 35 px). */
.fc-chip{flex-shrink:1;overflow:clip}   /* clip, не hidden: иначе flex сжимает чип ниже «имя 18 px + цифры» */
.fc-chip .fc-name{flex:0 1 auto;min-width:18px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.fc-chip .fc-val{flex:none}
/* «+ группа» — стекло как у чипа, только значок (гайдлайн §5) */
.fc-add{width:28px;height:28px;border:0;background:rgba(255,255,255,.35);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  box-shadow:inset 0 1px 0 var(--glass-hi),inset 0 0 0 .5px var(--border);color:var(--text-secondary);transition:background .16s ease-out,color .16s ease-out}
.fc-add .ui-icon,.fc-add svg{width:14px;height:14px}
:root[data-theme="dark"] .fc-add{background:rgba(255,255,255,.06)}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .fc-add{background:rgba(255,255,255,.06)}}
:root .func-chips .fc-add:hover{background:var(--matte);color:var(--text-primary)}
.topbar-add-btn{padding:6px 12px;font-size:13px;border-radius:var(--radius-pill);background:var(--yellow);color:var(--on-accent);font-weight:700;border:0}
.topbar-add-btn:hover{background:var(--yellow-hover)}

/* показатели: иконка вместо подписи, подписи возвращаются на широком экране */
.shift-header__stats .stat-item::before{content:'';width:17px;height:17px;flex:none;background:currentColor;opacity:.55;
  -webkit-mask-size:contain;mask-size:contain;-webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;-webkit-mask-position:center;mask-position:center}
.shift-header__stats .stat-item:nth-child(1)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-trending-up%22%20%3E%20%3Cpath%20d%3D%22M3%2017l6%20-6l4%204l8%20-8%22%20/%3E%20%3Cpath%20d%3D%22M14%207l7%200l0%207%22%20/%3E%20%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-trending-up%22%20%3E%20%3Cpath%20d%3D%22M3%2017l6%20-6l4%204l8%20-8%22%20/%3E%20%3Cpath%20d%3D%22M14%207l7%200l0%207%22%20/%3E%20%3C/svg%3E")}
.shift-header__stats .stat-item:nth-child(2)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-circle-check%22%20%3E%20%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200%22%20/%3E%20%3Cpath%20d%3D%22M9%2012l2%202l4%20-4%22%20/%3E%20%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-circle-check%22%20%3E%20%3Cpath%20d%3D%22M12%2012m-9%200a9%209%200%201%200%2018%200a9%209%200%201%200%20-18%200%22%20/%3E%20%3Cpath%20d%3D%22M9%2012l2%202l4%20-4%22%20/%3E%20%3C/svg%3E")}
.shift-header__stats .stat-item:nth-child(3)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-clock%22%20%3E%20%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200%22%20/%3E%20%3Cpath%20d%3D%22M12%207v5l3%203%22%20/%3E%20%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-clock%22%20%3E%20%3Cpath%20d%3D%22M3%2012a9%209%200%201%200%2018%200a9%209%200%200%200%20-18%200%22%20/%3E%20%3Cpath%20d%3D%22M12%207v5l3%203%22%20/%3E%20%3C/svg%3E")}
.shift-header__stats .stat-item:nth-child(4)::before{-webkit-mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-hourglass%22%20%3E%20%3Cpath%20d%3D%22M6.5%207h11%22%20/%3E%20%3Cpath%20d%3D%22M6.5%2017h11%22%20/%3E%20%3Cpath%20d%3D%22M6%2020v-2a6%206%200%201%201%2012%200v2a1%201%200%200%201%20-1%201h-10a1%201%200%200%201%20-1%20-1z%22%20/%3E%20%3Cpath%20d%3D%22M6%204v2a6%206%200%201%200%2012%200v-2a1%201%200%200%200%20-1%20-1h-10a1%201%200%200%200%20-1%201z%22%20/%3E%20%3C/svg%3E");mask-image:url("data:image/svg+xml,%3Csvg%20xmlns%3D%22http%3A//www.w3.org/2000/svg%22%20width%3D%2224%22%20height%3D%2224%22%20viewBox%3D%220%200%2024%2024%22%20fill%3D%22none%22%20stroke%3D%22currentColor%22%20stroke-width%3D%222%22%20stroke-linecap%3D%22round%22%20stroke-linejoin%3D%22round%22%20class%3D%22icon%20icon-tabler%20icons-tabler-outline%20icon-tabler-hourglass%22%20%3E%20%3Cpath%20d%3D%22M6.5%207h11%22%20/%3E%20%3Cpath%20d%3D%22M6.5%2017h11%22%20/%3E%20%3Cpath%20d%3D%22M6%2020v-2a6%206%200%201%201%2012%200v2a1%201%200%200%201%20-1%201h-10a1%201%200%200%201%20-1%20-1z%22%20/%3E%20%3Cpath%20d%3D%22M6%204v2a6%206%200%201%200%2012%200v-2a1%201%200%200%200%20-1%20-1h-10a1%201%200%200%200%20-1%201z%22%20/%3E%20%3C/svg%3E")}
.shift-header__stats,.func-chips{flex-wrap:nowrap}
@container app-viewport (max-width:1700px){.shift-header__stats .stat-label{display:none}}

/* показатели: иконка, число и подпись — по центру строки, а не по базовой линии */
.shift-header__stats .stat-item{align-items:center}
.shift-header__stats .stat-value{line-height:1}
.shift-header__stats .stat-label{line-height:1;position:relative;top:.5px}
.shift-header__stats .stat-item::before{position:relative;top:0}

/* ── Колонка задач: 1А, точка только у заголовка группы ─────────────────── */
.task-group-header{text-transform:none;letter-spacing:0;font-size:12.5px;font-weight:700;color:var(--text-secondary);margin:14px 0 0}
.task-group-bubbles{gap:6px}
.task-bubble{
  flex-direction:row;align-items:center;gap:8px;
  padding:6px 12px;border-left:0;border-radius:var(--radius-pill);
  background:var(--chip);box-shadow:inset 0 0 0 .5px var(--border);
  min-width:0;max-width:100%;line-height:1.25;
}
/* 1А (23.09): точка только у заголовка группы; у капсулы нет маркера. */
.task-bubble__name{font-size:13px;font-weight:700;overflow-wrap:normal;white-space:nowrap}
.task-bubble__progress,.task-bubble__norm{
  margin-top:0;font-size:11.5px;font-weight:500;color:var(--text-tertiary);
  font-family:var(--font-num);font-variant-numeric:tabular-nums;white-space:nowrap;
}
/* недельная норма (гайдлайн §5): заливка тоном группы на долю недели, прямой край */
.task-bubble{position:relative;z-index:0;overflow:hidden}
.task-bubble--quota::after{content:'';position:absolute;inset:0;width:calc(100% * var(--pn,0));background:var(--bubble-color);opacity:.16;z-index:-1;pointer-events:none}
.task-bubble--quota.selected::after{opacity:.12}
.task-bubble--done{opacity:.55}
.task-bubble__progress{font-weight:700;color:var(--text-secondary);display:inline-flex;align-items:center;gap:3px}
.task-bubble__progress--ok{color:var(--success)}
.task-bubble__progress .ui-icon{width:12px;height:12px}
.task-group-week{margin-left:auto;padding-left:12px;font:500 11.5px var(--font-num);font-variant-numeric:tabular-nums;color:var(--text-tertiary);white-space:nowrap}
.task-bubble:hover:not(.selected){background:var(--matte)}
.task-bubble{transition:background .16s ease-out,box-shadow .16s ease-out}
/* выбранная — полупрозрачная, как остальные (п. 21), тон группы поверх --chip; обводку владелец снял на приёмке 24.09,
   тон 12 → 18 %, чтобы выбор без обводки оставался заметным */
.task-bubble.selected{
  background:color-mix(in srgb,var(--bubble-color,var(--yellow)) 18%,var(--chip));
}
.task-bubble:focus-visible{outline:2px solid var(--border-focus);outline-offset:2px;box-shadow:none}

/* ── Панели: стекло вместо белых карточек ───────────────────────────────── */
.card{
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-edge);
  border-radius:var(--radius-lg);
  padding:14px 16px;
  box-shadow:var(--shadow-md),inset 0 1px 0 var(--glass-hi);
}
.card-title{font-size:14px;font-weight:700;text-transform:none;letter-spacing:0;color:var(--text-primary);border-bottom:0;padding-bottom:0}
.card__head{margin-bottom:10px;align-items:center}

.analytics-day-tl .shift-tl-hour-bg--alt{background:transparent}
.analytics-day-tl .shift-tl-grid{border-radius:var(--radius-sm);overflow:hidden}
.analytics-day-tl .shift-tl-hourline{background:var(--border)}
.analytics-day-tl .shift-redline-label{border-radius:var(--radius-pill);font:700 11.5px/1 var(--font-num)}
.analytics-day-tl .shift-redline-label--drag{cursor:ns-resize}
/* Окна: плотная поверхность, группы строк, раскладка F2 (§6 гайдлайна). */
.liquid-sheet{padding:16px;border:1px solid var(--border);border-radius:22px;background:var(--surface);box-shadow:var(--shadow-lg);color:var(--text-primary);max-height:calc(100 * var(--app-vh, 1vh) - 32px);overflow:auto}
.sheet-head{display:flex;align-items:center;gap:8px;margin-bottom:12px}
.sheet-head h3{margin:0;font:700 17px/1.3 var(--font);flex:1}
.sheet-head .btn{width:28px;height:28px;padding:4px;flex:none}
.sheet-dot{width:8px;height:8px;border-radius:50%;background:var(--dot);flex:none}
.sheet-group{border-radius:14px;background:var(--matte);overflow:hidden;margin-bottom:10px}
.sheet-row,.liquid-sheet #activityTimeRow>.field{display:flex;flex-wrap:nowrap;align-items:center;justify-content:space-between;gap:8px;padding:10px 12px;border-bottom:1px solid var(--border);font-size:14px}
.liquid-sheet .sheet-row.field{margin:0}
.sheet-row:last-child,.liquid-sheet #activityTimeRow>.field:last-child{border:0}
.sheet-row>label,.sheet-row>span:first-child{color:var(--text-secondary)}
.sheet-row b{font-weight:500}
.sheet-row .field__error{flex-basis:100%}
.sheet-row .field__error:empty{display:none}
.sheet-row input:not([type=checkbox]),.liquid-sheet #activityTimeRow input{width:90px;min-width:0;padding:4px 10px;border:1px solid var(--border-2);border-radius:9px;background:var(--border);color:var(--text-primary);font:700 14px/1.5 var(--font-num);text-align:right}
.sheet-row input:focus-visible{outline:2px solid var(--border-focus);outline-offset:1px}
.sheet-quantity{display:flex;align-items:center;gap:6px}
.sheet-quantity span{font:13px var(--font-num);color:var(--text-tertiary)}
.sheet-actions{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.sheet-actions .btn{width:100%;height:40px;border-radius:var(--radius-pill);font-size:14px}
.sheet-actions .sheet-delete{grid-column:1/-1;background:color-mix(in srgb,var(--danger) 12%,transparent);color:var(--danger-text);border:0}
.sheet-hint{font-size:12.5px;color:var(--text-tertiary);margin:0 0 10px}
.liquid-sheet .field__label{margin:0}

/* иконки в заголовках карточек */
.card__head{display:flex;align-items:center;justify-content:flex-start;gap:8px}
.card-ico{display:inline-flex;color:var(--text-secondary);font-size:0}
.card-ico .ui-icon{width:17px;height:17px}
.card__head .switch,.card__head .btn{margin-left:auto}
.card__head .switch+.switch{margin-left:12px}

/* guideline §5: один размер тумблера в обеих темах. */
.switch,.switch--sm{font-size:13.5px;line-height:1.3}
.switch .switch__track{width:38px;height:22px;border:0;background:var(--border-2)}
.switch .switch__track::after{width:18px;height:18px;top:2px;left:2px;background:var(--white)}
.switch input:checked + .switch__track::after{transform:translateX(16px)}

/* ── Полировка «Смены» по согласованным рендерам (design/guideline.html#tasks, design/guideline.html#today) ── */

/* 1. Фон-лента видна: рабочая область не перекрывает её своим цветом */
.app-layout,.main-content,.screen{background:transparent}

/* 4. Блоки дня: в тёмной теме тон группы заметнее, иначе всё сливается */

/* 6. Заголовок группы заданий: точка · имя · шеврон на одной оси (владелец 23.09, п. 24). Имя обрезано по высоте
   заглавных (text-box), поэтому центр точки и шеврона совпадает с серединой букв, а не с серединой строки с «хвостами». */
.task-group-header{gap:6px;min-height:22px}
.task-group-header__name{text-box:trim-both cap alphabetic;white-space:nowrap}
.task-group-toggle{display:grid;place-items:center;width:18px;height:18px;margin-left:-1px;padding:0;border-radius:50%;color:var(--text-tertiary)}
.task-group-toggle:hover{color:var(--text-primary);background:var(--matte)}
.task-group-chevron{width:12px;height:12px}
/* Порядок групп перетаскиванием (§24 #p24-tasks; приёмка 24.09, п. 6): тащат за заголовок (курсор «рука», матовая подложка
   при наведении, без ручки-точек); поднятая группа — стекло, как все поверхности, ниша — жёлтый пунктир; у обеих одно
   скругление --radius-lg; соседи едут 160 мс (FLIP в group-order.js) */
.task-bubbles{position:relative}
.task-group-header{cursor:pointer;border-radius:8px;margin-left:-6px;padding:0 6px;transition:background .16s ease-out}
.task-group[data-group] .task-group-header:hover{background:var(--matte);cursor:grab}
.task-group-header:focus-visible{outline:2px solid var(--border-focus);outline-offset:1px}
.task-group--lifted{z-index:5;box-sizing:content-box;padding:4px 8px 10px;margin:-4px -8px 0;border-radius:var(--radius-lg);
  background:var(--glass);backdrop-filter:blur(var(--glass-blur)) saturate(160%);-webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  box-shadow:inset 0 0 0 1px var(--glass-edge),var(--shadow-md);transform:scale(1.02);pointer-events:none}
.task-group[data-group].task-group--lifted .task-group-header,.task-group[data-group].task-group--lifted .task-group-header:hover{background:none}
.task-group-slot{flex:none;margin:-4px -8px -10px;border-radius:var(--radius-lg);border:1.5px dashed color-mix(in srgb,var(--yellow) 80%,var(--text-primary) 10%);
  background:color-mix(in srgb,var(--yellow) 10%,transparent);box-sizing:border-box}
body.is-dragging-group,body.is-dragging-group *{cursor:grabbing!important;user-select:none}
@media (prefers-reduced-motion:reduce){.task-group--lifted{transform:none}}

/* 7. Единые состояния фокуса по гайдлайну §5 */
  outline:2px solid var(--border-focus);outline-offset:2px;
}
/* ── Всплывающие окна и меню — стекло (§2 гайдлайна) ─────────────────────── */
.liquid-sheet,.pop,.popover,.timer-menu,#addModal{
  background:var(--glass);
  backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  -webkit-backdrop-filter:blur(var(--glass-blur)) saturate(160%);
  border:1px solid var(--glass-edge);
  box-shadow:var(--shadow-lg),inset 0 1px 0 var(--glass-hi);
}
.liquid-sheet .sheet-group,.pop .sheet-group{background:var(--matte)}
.popover-item:hover,.pop button:not(.btn):hover{background:var(--matte)}

/* Полосы прокрутки: тонкий скруглённый ползунок с отступом, дорожка прозрачная и не заходит в скругления
   окон (замечание владельца 24.09). Chrome/Safari — ::-webkit-scrollbar; Firefox — scrollbar-*. */
::-webkit-scrollbar{width:12px;height:12px}
::-webkit-scrollbar-track{background:transparent;margin:10px}
::-webkit-scrollbar-thumb{border:4px solid transparent;border-radius:999px;background:var(--border-2) padding-box}
::-webkit-scrollbar-thumb:hover{background-color:var(--text-tertiary)}
::-webkit-scrollbar-corner{background:transparent}
@supports not selector(::-webkit-scrollbar){*{scrollbar-width:thin;scrollbar-color:var(--border-2) transparent}}