/* «Контур» - оформление платформы программы «Флагманы СПО».
   Направление: категорийный стандарт, исполненный на предельном уровне ремесла
   (решение Сергея 27.08.2026, см. PRODUCT.md § Brand Commitments).
   Планка: российские рабочие сервисы, западные продуктовые эталоны, учебные кабинеты.
   Тёмная тема не делается - отклонена тем же решением.
   Состав и логика страниц не меняются: файл переодевает существующую разметку. */

@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-cyrillic-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-latin-400.woff2") format("woff2");
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-cyrillic-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
}

@font-face {
  font-family: "Golos Text";
  src: url("../fonts/golos-text-latin-600.woff2") format("woff2");
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

/* Source Serif 4 больше не подключается: рабочий инструмент говорит одной гарнитурой,
   а два освободившихся файла возвращают комплект в исходный лимит ТЗ (четыре файла). */

:root {
  color-scheme: light;

  /* Поверхности: холодный нейтральный ряд рабочего инструмента */
  --app: #F6F7F9;              /* фон приложения */
  --paper: #FFFFFF;            /* карточка, панель, строка таблицы */
  --paper-warm: #FAFBFC;       /* наведение на строку */
  --surface: #F2F4F7;          /* шапка таблицы, вторичный фон */
  --surface-strong: #E7EAEF;   /* дорожка полосы, выключенный элемент */

  /* Тушь */
  --ink: #101828;              /* основной текст, 16,7:1 к белому */
  --ink-soft: #4A5567;         /* вторичный текст, 7,9:1 к белому */
  --ink-faint: #5C6676;        /* третичный; на белом и на всех светлых подложках >5:1 */
  --disabled-ink: #737F91;     /* 4,6:1 к белому */

  /* Линии */
  --line: #E3E6EB;             /* волосяная граница */
  --line-strong: #A9B1BE;      /* граница элемента управления, 3,05:1 к белому */

  /* Акцент - один */
  --blue: #1A56DB;             /* 6,4:1 к белому */
  --blue-hover: #123FA8;
  --blue-soft: #EDF2FE;
  --blue-line: #B7CCFA;

  /* Состояния: у каждого свой тёмный текст и своя светлая подложка.
     Цвет никогда не единственный носитель - рядом слово и форма метки. */
  --green-ink: #0A6B3D;        /* 5,0:1 к белому */
  --green: #12A05C;
  --green-soft: #E8F6EF;
  --green-line: #A7DCC3;
  --yellow-ink: #7A4A00;       /* 6,3:1 к белому */
  --yellow: #C98A00;
  --yellow-soft: #FDF3E0;
  --yellow-line: #EBCE95;
  --danger: #B32318;           /* 6,3:1 к белому */
  --danger-soft: #FDEEEC;
  --danger-line: #F1B5AE;
  --coral: #C4441F;
  --coral-ink: #93300F;
  --coral-soft: #FDF0EB;

  --focus: #1A56DB;
  --focus-ring: rgba(26, 86, 219, .22);
  --scroll-shadow: rgba(16, 24, 40, .16);

  /* Тени: у каждой есть смещение и мягкое размытие */
  --shadow-sm: 0 1px 2px rgba(16, 24, 40, .05);
  --shadow-md: 0 4px 8px -2px rgba(16, 24, 40, .08), 0 12px 24px -6px rgba(16, 24, 40, .08);
  --shadow-pop: 0 8px 16px -4px rgba(16, 24, 40, .10), 0 24px 48px -12px rgba(16, 24, 40, .16);

  --radius-sm: 6px;
  --radius-md: 10px;
  --radius-lg: 14px;

  --font-ui: "Golos Text", "Segoe UI", Arial, sans-serif;
  --font-display: var(--font-ui);

  --content-max: 1240px;
  --anchor-offset: 80px;
  --ease: cubic-bezier(.16, 1, .3, 1);

  --print-paper: #ffffff;
  --print-ink: #000000;
  --print-line: #777777;
}

* { box-sizing: border-box; }

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: var(--anchor-offset);
  background: var(--app);
  /* Полосы прокрутки - часть оформления, а не браузерная случайность. */
  scrollbar-color: var(--line-strong) var(--app);
  scrollbar-width: thin;
}

body {
  min-width: 320px;
  margin: 0;
  background: var(--app);
  color: var(--ink);
  font-family: var(--font-ui);
  font-size: 15px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

::-webkit-scrollbar { width: 12px; height: 12px; }
::-webkit-scrollbar-track { background: var(--app); }
::-webkit-scrollbar-thumb { border: 3px solid var(--app); border-radius: 999px; background: var(--line-strong); }
::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); }
::-webkit-scrollbar-corner { background: var(--app); }

::selection { background: var(--blue); color: #fff; }
input, textarea, select { caret-color: var(--blue); }

button, input, select, textarea { font: inherit; }
button, a { -webkit-tap-highlight-color: transparent; }
img, svg { max-width: 100%; }

a { color: var(--blue); text-decoration-thickness: 1px; text-underline-offset: 3px; }
a:hover { color: var(--blue-hover); text-decoration-thickness: 2px; }

p { max-width: 68ch; }

/* Заголовки рабочего инструмента: шаг заметный, но ни один не претендует на разворот.
   Прежняя тема разгоняла h1 до 4,35rem - это масштаб афиши, а не кабинета. */
h1, h2, h3, h4 { color: var(--ink); font-family: var(--font-ui); font-weight: 600; letter-spacing: -.018em; text-wrap: balance; }
h1 { margin: 0 0 12px; font-size: clamp(1.5rem, 2.4vw, 1.875rem); line-height: 1.22; }
h2 { margin: 0 0 10px; font-size: clamp(1.1875rem, 1.7vw, 1.375rem); line-height: 1.28; letter-spacing: -.014em; }
h3 { margin: 0 0 6px; font-size: 1rem; line-height: 1.4; letter-spacing: -.008em; }
h4 { margin: 0 0 6px; font-size: .9375rem; line-height: 1.4; }

.muted { color: var(--ink-soft); }
.small, .text-sm { font-size: .8125rem; }

/* Все числовые поля набираются табличными цифрами: разряд под разрядом. */
td, th, .value, .metric-value, .stat-num, .kpi, .task-date, .hours-norm, .timer,
.progress-value, .poll-count, .num, time { font-variant-numeric: tabular-nums; }

.skip-link {
  position: fixed; left: 16px; top: -80px; z-index: 1000;
  padding: 10px 14px; border: 1px solid var(--blue); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--blue); font-weight: 600;
  box-shadow: var(--shadow-pop);
}
.skip-link:focus { top: 12px; }

/* ── шапка ────────────────────────────────────────────────────────────── */

.topbar {
  position: sticky; top: 0; z-index: 100; min-height: 64px;
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 10px max(20px, calc((100vw - var(--content-max)) / 2));
  border-bottom: 1px solid var(--line);
  background: var(--paper);
}
.brand { display: inline-flex; gap: 10px; align-items: center; color: var(--ink); font-weight: 600; font-size: .9375rem; letter-spacing: -.01em; text-decoration: none; }
.brand:hover { color: var(--ink); }
.brand-logo { width: 32px; height: 32px; flex: 0 0 32px; }
.brand small { display: block; margin-top: 1px; color: var(--ink-faint); font-size: .6875rem; font-weight: 500; letter-spacing: .01em; }

.topnav { display: flex; gap: 2px; align-items: center; }
.topnav a {
  min-height: 44px; display: inline-flex; align-items: center; padding: 10px 12px;
  border-radius: var(--radius-sm); color: var(--ink-soft);
  font-size: .8125rem; font-weight: 600; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.topnav a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.topnav a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); }
.account-label { align-self: center; margin-right: 6px; padding-right: 12px; border-right: 1px solid var(--line); color: var(--ink-faint); font-size: .8125rem; }

.message-stack { max-width: var(--content-max); margin: 14px auto 0; padding: 0 24px; display: grid; gap: 8px; }

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

.page-shell {
  width: min(var(--content-max), calc(100% - 40px));
  min-height: calc(100vh - 64px);
  margin: 0 auto;
  padding: clamp(24px, 3.5vw, 40px) 0 64px;
}
.workspace {
  width: min(var(--content-max), calc(100% - 40px));
  margin: 0 auto;
  display: grid; grid-template-columns: 236px minmax(0, 1fr); gap: 28px;
}
.workspace-main { min-width: 0; padding: clamp(24px, 3.5vw, 40px) 0 64px; }
.workspace-header, .panel-head { display: flex; gap: 20px; align-items: flex-start; justify-content: space-between; }
.workspace-header { margin-bottom: 22px; }
.workspace-header h1 { margin: 0 0 4px; }
.workspace-header .muted { max-width: 66ch; }
.panel-head { margin-bottom: 16px; }
.panel-head h2, .panel-head h3 { margin: 0 0 4px; }
.panel-head p { margin: 0; max-width: 72ch; }
/* Метка не стоит над заголовком: капсула над H1 - самый узнаваемый зачин машинной
   генерации. Там, где метка несет состояние или число, она читается после заголовка,
   подчиненной строкой; декоративных меток в разметке не осталось. */
.panel-head h1 + .tag, .panel-head h2 + .tag, .panel-head h3 + .tag { margin: 0 0 8px; }

/* ── боковое меню ─────────────────────────────────────────────────────── */

.side-nav {
  position: sticky; top: 80px; height: fit-content; margin-top: clamp(24px, 3.5vw, 40px);
  padding: 8px; display: grid; gap: 1px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); box-shadow: var(--shadow-sm);
}
.side-label { margin: 6px 10px 8px; color: var(--ink-faint); font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; }
.side-nav a {
  position: relative; min-height: 40px; display: flex; gap: 10px; align-items: center;
  padding: 9px 10px 9px 12px; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: .875rem; font-weight: 500; text-decoration: none;
  transition: background-color .12s ease, color .12s ease;
}
.side-nav a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
.side-nav a.active, .side-nav a[aria-current="page"] { background: var(--blue-soft); color: var(--blue); font-weight: 600; }
/* Текущий раздел различается подложкой, цветом и насыщенностью начертания,
   плюс aria-current в разметке. Цветной полосы у края нет. */
.side-project { margin: 8px 2px 2px; padding: 12px 10px 4px; border-top: 1px solid var(--line); color: var(--ink-soft); font-size: .75rem; }
.side-project strong, .side-project span { display: block; }
.side-project strong { margin: 4px 0 8px; color: var(--ink); font-size: .8125rem; }

.icon { width: 18px; height: 18px; display: inline-block; flex: 0 0 18px; opacity: .6; }
.side-nav a.active .icon, .side-nav a[aria-current="page"] .icon { opacity: .95; }
.nav-icon { width: 16px; height: 16px; flex-basis: 16px; }

/* ── профиль ──────────────────────────────────────────────────────────── */

.profile { display: flex; gap: 10px; align-items: center; padding: 6px 12px 6px 6px; border: 1px solid var(--line); border-radius: 999px; background: var(--paper); box-shadow: var(--shadow-sm); }
.avatar { width: 34px; height: 34px; display: grid; place-items: center; flex: 0 0 34px; border-radius: 50%; background: var(--blue-soft); color: var(--blue); font-size: .75rem; font-weight: 600; letter-spacing: .02em; }
.profile strong, .profile span { display: block; }
.profile strong { font-size: .875rem; }
/* :not(.avatar) обязателен: без него правило перебивает цвет инициалов по специфичности
   и роняет их контраст на подложке кружка ниже порога 4,5:1. */
.profile span:not(.avatar) { color: var(--ink-faint); font-size: .75rem; }

/* Класс сохранен для трех мест, где надпись несет состояние (ход голосования, роль
   куратора). Стоит после заголовка и читается как статус-метка, а не как кикер. */
.eyebrow {
  display: inline-flex; align-items: center; min-height: 26px; margin: -4px 0 12px;
  padding: 4px 10px; border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--ink-soft);
  font-size: .75rem; font-weight: 600; letter-spacing: 0; text-transform: none;
}

/* ── панели и показатели ──────────────────────────────────────────────── */

.panel {
  padding: clamp(16px, 2vw, 22px);
  border: 1px solid var(--line); border-radius: var(--radius-lg);
  background: var(--paper); box-shadow: var(--shadow-sm);
}
/* Цветная планка по краю карточки - один из самых узнаваемых следов генерации.
   Состояние панели несет цвет ее волосяной рамки и метка в заголовке, планки нет. */
.panel--attention { border-color: var(--yellow-line); }
.panel--coral { border-color: var(--coral); }
.panel-compact { padding: 14px 16px; }
.card { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }

.kpi-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 18px; }
.kpi {
  min-height: 104px; padding: 14px 16px;
  display: flex; flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); box-shadow: var(--shadow-sm);
}
.kpi .muted, .kpi .small { color: var(--ink-soft); font-size: .8125rem; font-weight: 500; }
.kpi .value, .kpi strong, .metric-value, .stat-num {
  display: block; margin-top: 6px;
  font-size: 1.625rem; font-weight: 600; line-height: 1.14; letter-spacing: -.026em;
}
.kpi .delta { margin-top: auto; padding-top: 6px; color: var(--ink-faint); font-size: .75rem; }
.kpi .value { overflow-wrap: anywhere; }
.kpi .value.text-sm { font-size: 1rem; letter-spacing: -.01em; }
.metric-value--lg { font-size: 1.9375rem; }
.kpi .progress, .kpi .bar, .kpi progress { margin-top: 8px; }

.stat-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 16px 0; }
.stat { min-height: 96px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.stat-num { margin: 0; }
.stat-label { color: var(--ink-soft); font-size: .8125rem; }

/* ── метки состояния ──────────────────────────────────────────────────── */

.tag, .chip {
  min-height: 24px; display: inline-flex; gap: 6px; align-items: center;
  padding: 3px 9px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink);
  font-size: .75rem; font-weight: 600; line-height: 1.3;
}
/* Точка внутри метки не украшение: она кодирует состояние формой наравне с цветом -
   круг сведения, ромб ожидание, квадрат отказ, кольцо успех. У нейтральной метки
   состояния нет, поэтому нет и точки. */
.tag-blue::before, .tag.info::before, .chip.info::before,
.tag-warning::before, .tag.warning::before, .chip.warning::before,
.tag-danger::before, .tag.danger::before, .chip.danger::before,
.tag.success::before, .chip.success::before {
  content: ""; width: 7px; height: 7px; flex: 0 0 7px; border-radius: 50%; background: currentColor;
}
.tag-blue, .tag.info, .chip.info { border-color: var(--blue-line); background: var(--blue-soft); color: var(--blue-hover); }
.tag-warning, .tag.warning, .chip.warning { border-color: var(--yellow-line); background: var(--yellow-soft); color: var(--yellow-ink); }
.tag-warning::before, .tag.warning::before, .chip.warning::before { border-radius: 1px; transform: rotate(45deg); }
.tag-danger, .tag.danger, .chip.danger { border-color: var(--danger-line); background: var(--danger-soft); color: var(--danger); }
.tag-danger::before, .tag.danger::before, .chip.danger::before { border-radius: 1px; transform: none; }
.tag.success, .chip.success { border-color: var(--green-line); background: var(--green-soft); color: var(--green-ink); }
.tag.success::before, .chip.success::before { width: 7px; height: 7px; border: 2px solid currentColor; background: transparent; }

/* ── полосы сообщений ─────────────────────────────────────────────────── */

/* Толстая цветная планка слева заменена полной подложкой с тонкой рамкой:
   состояние читается всей плоскостью, а не полоской у края. */
.status-banner, .callout, .toast {
  position: relative; padding: 13px 16px 13px 40px;
  border: 1px solid var(--blue-line); border-radius: var(--radius-md);
  background: var(--blue-soft); color: var(--ink);
}
.status-banner::before, .callout::before, .toast::before {
  content: ""; position: absolute; left: 15px; top: 17px;
  width: 10px; height: 10px; border-radius: 50%; background: var(--blue);
}
.status-banner p, .callout p, .toast p { max-width: 70ch; }
.status-banner--success, .callout--success { border-color: var(--green-line); background: var(--green-soft); }
.status-banner--success::before, .callout--success::before { background: var(--green-ink); }
.status-banner--error { border-color: var(--danger-line); background: var(--danger-soft); }
.status-banner--error::before { background: var(--danger); border-radius: 2px; }
.callout--warning { border-color: var(--yellow-line); background: var(--yellow-soft); }
.callout--warning::before { background: var(--yellow-ink); border-radius: 1px; transform: rotate(45deg); }
.callout--compact { padding: 9px 12px 9px 34px; }
.callout--compact::before { left: 13px; top: 13px; width: 8px; height: 8px; }
.toast { max-width: 420px; box-shadow: var(--shadow-pop); }

/* Единственный поставленный момент движения на странице: полоса, которая говорит,
   чего не хватает, приезжает один раз из уже видимого положения. */
.status-banner { animation: banner-settle .42s var(--ease) both; }
@keyframes banner-settle {
  from { transform: translateY(-4px); box-shadow: 0 0 0 0 var(--focus-ring); }
  to { transform: none; box-shadow: 0 0 0 4px transparent; }
}

.empty-state {
  min-height: 132px; display: grid; place-items: center; padding: 22px;
  border: 1px dashed var(--line-strong); border-radius: var(--radius-md);
  background: var(--surface); color: var(--ink-soft); text-align: center;
}
.empty-state > * { max-width: 50ch; }
.loading-state { position: relative; overflow: hidden; padding: 16px 18px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); }
.loading-state::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .85), transparent); animation: loading-sweep 1.4s infinite; }
@keyframes loading-sweep { from { transform: translateX(-100%); } to { transform: translateX(100%); } }

/* ── полоса просмотра глазами роли ────────────────────────────────────── */

.view-as-banner {
  min-height: 48px; padding: 9px 24px;
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center;
  border-bottom: 1px solid var(--yellow-line);
  background: var(--yellow-soft); color: var(--yellow-ink); font-size: .875rem;
}
.view-as-banner strong { color: var(--ink); }
.view-as-switch { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }

.view-as-menu { position: relative; }
.view-as-menu > summary {
  min-height: 44px; display: inline-flex; align-items: center; gap: 6px; padding: 10px 14px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink);
  font-family: var(--font-ui); font-size: .8125rem; font-weight: 600;
  list-style: none; cursor: pointer;
  transition: border-color .12s ease, background-color .12s ease;
}
.view-as-menu > summary::-webkit-details-marker { display: none; }
.view-as-menu > summary::after { content: ""; width: 6px; height: 6px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: translateY(-2px) rotate(45deg); transition: transform .18s var(--ease); }
.view-as-menu > summary:hover { border-color: var(--ink-soft); background: var(--surface); }
.view-as-menu[open] > summary { border-color: var(--blue); color: var(--blue); }
.view-as-menu[open] > summary::after { transform: translateY(1px) rotate(-135deg); }
.view-as-menu-body {
  position: absolute; right: 0; z-index: 30; min-width: 232px; margin-top: 6px;
  padding: 8px; display: flex; flex-direction: column; gap: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); box-shadow: var(--shadow-pop);
  animation: menu-open .2s var(--ease) both;
}
@keyframes menu-open { from { transform: translateY(-6px); clip-path: inset(0 0 88% 0); } to { transform: none; clip-path: inset(0 0 0 0); } }
.view-as-menu-body a { padding: 8px 10px; border-radius: var(--radius-sm); font-size: .8125rem; font-weight: 600; text-decoration: none; }
.view-as-menu-body a:hover { background: var(--surface); }

/* ── кнопки ───────────────────────────────────────────────────────────── */

.btn, button, input[type="submit"] {
  min-width: 44px; min-height: 40px; padding: 9px 16px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  border: 1px solid var(--blue); border-radius: var(--radius-sm);
  background: var(--blue); color: #fff;
  font-family: var(--font-ui); font-size: .875rem; font-weight: 600; line-height: 1.2;
  box-shadow: var(--shadow-sm); cursor: pointer;
  transition: background-color .12s ease, border-color .12s ease, box-shadow .12s ease;
}
.btn:hover, button:hover, input[type="submit"]:hover { border-color: var(--blue-hover); background: var(--blue-hover); color: #fff; text-decoration: none; }
.btn:active, button:active, input[type="submit"]:active { box-shadow: none; transform: translateY(1px); }
.btn.is-hover { border-color: var(--blue-hover); background: var(--blue-hover); color: #fff; }
.btn.is-focus { outline: 2px solid var(--focus); outline-offset: 2px; }
.btn.is-active { transform: translateY(1px); box-shadow: none; }
.btn.is-error { border-color: var(--danger); background: var(--danger); color: #fff; }
.btn-primary { border-color: var(--blue); background: var(--blue); }
.btn-secondary, .btn-ghost { border-color: var(--line-strong); background: var(--paper); color: var(--ink); }
.btn-secondary:hover, .btn-ghost:hover { border-color: var(--ink-soft); background: var(--surface); color: var(--ink); }
.btn-ghost { border-color: transparent; background: transparent; box-shadow: none; }
.btn-dark { border-color: var(--ink); background: var(--ink); color: #fff; }
.btn-dark:hover { border-color: #000; background: #000; }
.btn-danger { border-color: var(--danger); background: var(--danger); }
.btn-danger:hover { border-color: #8E1C13; background: #8E1C13; }
.btn-small { min-height: 36px; padding: 7px 12px; font-size: .8125rem; }
.icon-button { width: 44px; height: 44px; display: inline-grid; place-items: center; padding: 0; border-radius: var(--radius-sm); }
.btn.is-loading, button.is-loading { position: relative; color: transparent; pointer-events: none; }
.btn.is-loading::after, button.is-loading::after { content: ""; position: absolute; width: 16px; height: 16px; border: 2px solid #fff; border-right-color: transparent; border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.btn:disabled, button:disabled, input[type="submit"]:disabled {
  border-color: var(--line); background: var(--surface-strong); color: var(--disabled-ink);
  box-shadow: none; cursor: not-allowed;
}
.btn:disabled:hover, button:disabled:hover { border-color: var(--line); background: var(--surface-strong); color: var(--disabled-ink); }

/* ── поля ─────────────────────────────────────────────────────────────── */

label { color: var(--ink); font-weight: 600; font-size: .875rem; }
input, select, textarea {
  width: 100%; min-height: 40px; padding: 9px 11px;
  border: 1px solid var(--line-strong); border-radius: var(--radius-sm);
  background: var(--paper); color: var(--ink); font: inherit;
  box-shadow: var(--shadow-sm);
  transition: border-color .12s ease, box-shadow .12s ease;
}
input::placeholder, textarea::placeholder { color: var(--disabled-ink); }
input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); }
input:focus, select:focus, textarea:focus { border-color: var(--blue); outline: 0; box-shadow: 0 0 0 3px var(--focus-ring); }
input:disabled, select:disabled, textarea:disabled { border-color: var(--line); background: var(--surface); color: var(--disabled-ink); box-shadow: none; }
input[aria-invalid="true"], .field-error input, .field-error select, .field-error textarea { border-color: var(--danger); }
input[aria-invalid="true"]:focus, .field-error input:focus { box-shadow: 0 0 0 3px rgba(179, 35, 24, .18); }
input.is-hover, select.is-hover, textarea.is-hover { border-color: var(--ink-faint); }
input.is-focus, select.is-focus, textarea.is-focus { border-color: var(--blue); box-shadow: 0 0 0 3px var(--focus-ring); }
textarea { min-height: 120px; resize: vertical; }
input[type="radio"], input[type="checkbox"] { width: 18px; height: 18px; min-height: 18px; padding: 0; box-shadow: none; accent-color: var(--blue); }
.check-field { min-height: 44px; display: flex; gap: 10px; align-items: center; }
.check-field.is-error, .field-error label { color: var(--danger); }
.switch-field { min-height: 44px; display: inline-flex; gap: 10px; align-items: center; cursor: pointer; }
.switch-field input { position: absolute; width: 1px; height: 1px; min-height: 1px; opacity: 0; }
.switch-control { width: 42px; height: 24px; display: inline-flex; align-items: center; padding: 2px; border: 1px solid var(--line-strong); border-radius: 999px; background: var(--surface-strong); transition: background-color .15s ease, border-color .15s ease; }
.switch-control::after { content: ""; width: 18px; height: 18px; border-radius: 50%; background: var(--paper); box-shadow: var(--shadow-sm); transition: transform .15s var(--ease); }
.switch-field input:checked + .switch-control { border-color: var(--blue); background: var(--blue); }
.switch-field input:checked + .switch-control::after { transform: translateX(18px); }
.switch-field:has(input:disabled) { color: var(--disabled-ink); cursor: not-allowed; }
.switch-field input:disabled + .switch-control { opacity: .55; }
.file-field { padding: 16px; border: 1px dashed var(--line-strong); border-radius: var(--radius-md); background: var(--surface); }
.file-field input { min-height: 40px; padding: 6px; background: var(--paper); }
.file-field.is-error { border-color: var(--danger); background: var(--danger-soft); }

:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: var(--radius-sm); }

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

.actions { margin-top: 16px; display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.task-list, .artifact-flow, .timeline { display: grid; gap: 8px; }
.task-row {
  display: grid; grid-template-columns: 26px minmax(0, 1fr) auto; gap: 12px; align-items: center;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper);
  transition: border-color .12s ease, background-color .12s ease;
}
.task-row:hover { border-color: var(--line-strong); background: var(--paper-warm); }
.task-row.is-selected { border-color: var(--blue); background: var(--blue-soft); }
.task-row strong, .task-row span { display: block; }
.task-row strong { font-size: .9375rem; line-height: 1.4; }
.task-row span { color: var(--ink-soft); font-size: .8125rem; line-height: 1.45; }
.task-check {
  width: 24px; height: 24px; display: grid; place-items: center;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--ink-soft); font-size: .6875rem; font-weight: 600;
}
.task-row.done .task-check, .task-row.complete .task-check { border-color: var(--green-line); background: var(--green-soft); color: var(--green-ink); }
.task-row.done strong { color: var(--ink-soft); }
.task-date { text-align: right; font-size: .8125rem; }
.task-date strong { display: block; font-size: .875rem; }
.task-date span { color: var(--ink-faint); font-size: .75rem; }

.artifact { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.artifact.complete { border-color: var(--green-line); background: var(--green-soft); }
.team-name { display: block; margin-top: 4px; color: var(--ink-soft); font-size: .8125rem; }
.module { padding: 14px 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--paper); }
.artifact .num, .module .num { display: block; margin-bottom: 5px; color: var(--ink-faint); font-size: .6875rem; font-weight: 600; letter-spacing: .02em; }
.artifact strong, .module strong { display: block; font-size: .9375rem; line-height: 1.35; }
.artifact p, .module span { margin: 4px 0 0; color: var(--ink-soft); font-size: .8125rem; }

.timeline { gap: 0; }
.timeline > * { position: relative; padding: 14px 16px 14px 38px; border: 1px solid var(--line); border-radius: 0; background: var(--paper); margin-top: -1px; }
.timeline > *:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; margin-top: 0; }
.timeline > *:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); }
.timeline > *:only-child { border-radius: var(--radius-md); }
.timeline > *::before { content: ""; position: absolute; left: 16px; top: 19px; width: 8px; height: 8px; border: 2px solid var(--blue); border-radius: 50%; background: var(--paper); z-index: 1; }
/* Соединительная линия между шагами: путь читается как путь, а не как стопка карточек. */
.timeline > *::after { content: ""; position: absolute; left: 19.5px; top: 27px; bottom: -1px; width: 1px; background: var(--line); }
.timeline > *:last-child::after { display: none; }

/* ── таблицы ──────────────────────────────────────────────────────────── */

.table-wrap {
  max-width: 100%; overflow-x: auto;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background:
    linear-gradient(to right, var(--paper) 30%, transparent) left center,
    linear-gradient(to left, var(--paper) 30%, transparent) right center,
    radial-gradient(farthest-side at 0 50%, var(--scroll-shadow), transparent) left center,
    radial-gradient(farthest-side at 100% 50%, var(--scroll-shadow), transparent) right center;
  background-color: var(--paper);
  background-repeat: no-repeat;
  background-attachment: local, local, scroll, scroll;
  background-size: 42px 100%, 42px 100%, 16px 100%, 16px 100%;
}
.table-wrap:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.table-wrap > table { background: transparent; }
.data-table, table { width: 100%; border-collapse: collapse; background: var(--paper); font-size: .875rem; }
th, td { padding: 10px 14px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
th {
  background: var(--surface); color: var(--ink-soft);
  font-size: .6875rem; font-weight: 600; letter-spacing: .04em; text-transform: uppercase;
  white-space: nowrap;
}
tbody tr { transition: background-color .1s ease; }
tbody tr:hover { background: var(--paper-warm); }
tbody tr:last-child td { border-bottom: 0; }
.sort-link { min-height: 36px; display: inline-flex; gap: 6px; align-items: center; color: inherit; }

/* ── полосы готовности ────────────────────────────────────────────────── */

.progress, .mini-progress, .bar {
  width: 100%; height: 6px; overflow: hidden; border: 0; border-radius: 999px;
  background: var(--surface-strong); color: var(--blue); appearance: none;
}
.progress-with-value { min-width: 120px; display: grid; grid-template-columns: minmax(72px, 1fr) auto; gap: 10px; align-items: center; }
.progress-value { min-width: 4ch; color: var(--ink-soft); font-size: .75rem; font-weight: 600; text-align: right; white-space: nowrap; }
.side-project .progress-with-value { min-width: 0; margin: 8px 0 4px; }
progress::-webkit-progress-bar { border-radius: 999px; background: var(--surface-strong); }
progress::-webkit-progress-value { border-radius: 999px; background: var(--blue); }
progress::-moz-progress-bar { border-radius: 999px; background: var(--blue); }
progress.warning::-webkit-progress-value { background: var(--yellow); }
progress.warning::-moz-progress-bar { background: var(--yellow); }
progress.danger::-webkit-progress-value { background: var(--danger); }
progress.danger::-moz-progress-bar { background: var(--danger); }
.mini-progress { height: 5px; }

.score-ring {
  width: 116px; height: 116px; display: grid; place-items: center;
  border: 8px solid var(--blue); border-radius: 50%;
  background: var(--paper); color: var(--ink);
  box-shadow: inset 0 0 0 6px var(--blue-soft);
  font-size: 1.75rem; font-weight: 600; letter-spacing: -.02em;
}

.heatmap { display: grid; grid-template-columns: minmax(110px, 1fr) repeat(6, 48px); gap: 3px; overflow-x: auto; }
.heatmap > * { min-height: 40px; display: grid; place-items: center; border-radius: var(--radius-sm); background: var(--surface); font-size: .75rem; }
.heat-1 { background: var(--blue-soft) !important; }
.heat-2 { background: var(--green-soft) !important; }
.heat-3 { background: var(--yellow-soft) !important; }
.heat-4 { background: var(--blue) !important; color: #fff; }

.timer, .hours-norm {
  min-height: 40px; display: inline-flex; gap: 8px; align-items: center; padding: 7px 12px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); color: var(--ink);
}
.hours-norm { flex-direction: column; gap: 0; align-items: flex-end; background: var(--surface); border-color: transparent; }
.hours-norm strong { font-size: 1.1875rem; font-weight: 600; letter-spacing: -.02em; }
.hours-norm span { color: var(--ink-faint); font-size: .6875rem; }

.iframe-wrap { overflow: hidden; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface); aspect-ratio: 16 / 9; }
.iframe-wrap iframe { width: 100%; height: 100%; border: 0; }

/* ── окно помощника ───────────────────────────────────────────────────── */

/* Переписка, а не чат: реплики идут одной колонкой сверху вниз, без пузырей по краям.
   Пузыри мессенджера здесь ничего не добавляют - собеседник всего один, и он машина. */
.dialog { display: grid; gap: 8px; }
.reply {
  padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper);
}
.reply--machine { background: var(--surface); }
.reply--attention { border-color: var(--yellow-line); background: var(--yellow-soft); }
.reply-author {
  margin: 0 0 4px; display: flex; gap: 10px; align-items: baseline;
  color: var(--ink-faint); font-size: .75rem; font-weight: 600;
}
.reply-author time { font-weight: 400; font-variant-numeric: tabular-nums; }
.reply-text { margin: 0; max-width: 68ch; font-size: .9375rem; line-height: 1.55; }
.reply-note { margin: 8px 0 0; color: var(--yellow-ink); font-size: .8125rem; font-weight: 600; }

.ask-form label { display: block; margin-bottom: 6px; }
.ask-form textarea { min-height: 84px; }

/* ── подвал ───────────────────────────────────────────────────────────── */

.site-footer { border-top: 1px solid var(--line); background: var(--paper); color: var(--ink-soft); }
.site-footer-inner { max-width: var(--content-max); margin: 0 auto; padding: 24px 24px 32px; display: block; }
.site-footer p { max-width: 76ch; }

/* ── вспомогательные ──────────────────────────────────────────────────── */

.flush { margin: 0; }
.display-inline { display: inline; }
.display-inline-block { display: inline-block; }
.display-block { display: block; }
.full-width { width: 100%; }
.flex-one { flex: 1; }
.flex-full { flex: 1 1 100%; }
.flex-wrap { flex-wrap: wrap; }
.flex-wrap-start { flex-wrap: wrap; align-items: flex-start; }
.flex-field { flex: 1 1 auto; min-width: 220px; }
.flex-field-wide { flex: 1 1 320px; min-width: 220px; }
.cluster { display: flex; flex-wrap: wrap; }
.cluster--6 { gap: 6px; }
.cluster--8 { gap: 8px; }
.cluster--10 { gap: 10px; }
.cluster--center { align-items: center; }
.cluster--start, .items-start { align-items: flex-start; }
.gap-16 { gap: 16px; }
.stack { display: flex; flex-direction: column; }
.stack--6 { gap: 6px; }
.field-min { min-width: 200px; }
.field-short { width: 64px; }
.weight-medium { font-weight: 500; }
.weight-semibold { font-weight: 600; }
.text-right { text-align: right; }
.text-nowrap { white-space: nowrap; }
.text-danger { color: var(--danger); }
.success { color: var(--green-ink); }
.is-clickable { cursor: pointer; }
.prose-relaxed { line-height: 1.7; }
.prose-comfortable { line-height: 1.6; }
.lead-copy { margin: 14px 0 18px; max-width: 66ch; font-size: 1rem; line-height: 1.6; color: var(--ink-soft); }
.legal-heading { margin: 26px 0 6px; font-size: 1.125rem; font-weight: 600; letter-spacing: -.012em; }
.subheading { margin: 20px 0 8px; font-size: .9375rem; font-weight: 600; }
.list-compact { margin: 0; padding-left: 20px; }
.list-compact li { margin-bottom: 4px; }
.list-nested { margin: 8px 0 0 18px; padding: 0; }
.measure-520 { max-width: 520px; }
.measure-560 { max-width: 560px; }
.measure-620 { max-width: 620px; }
.measure-760 { max-width: 760px; }
.measure-820 { max-width: 820px; }
.measure-860 { max-width: 860px; }
.measure-1000 { max-width: 1000px; }
.measure-1060 { max-width: 1060px; }
.space-left-8 { margin-left: 8px; }
.space-top-2 { margin-top: 2px; }
.space-top-4 { margin-top: 4px; }
.space-top-6 { margin-top: 6px; }
.space-top-8 { margin-top: 8px; }
.space-top-10 { margin-top: 10px; }
.space-top-12 { margin-top: 12px; }
.space-top-14 { margin-top: 14px; }
.space-top-16 { margin-top: 16px; }
.space-top-18 { margin-top: 18px; }
.space-top-22 { margin-top: 22px; }
.space-top-32 { margin-top: 32px; }
.space-top-48 { margin-top: 48px; }
.space-bottom-4 { margin-bottom: 4px; }
.space-bottom-6 { margin-bottom: 6px; }
.space-bottom-8 { margin-bottom: 8px; }
.space-bottom-10 { margin-bottom: 10px; }
.space-bottom-12 { margin-bottom: 12px; }
.space-bottom-14 { margin-bottom: 14px; }
.space-bottom-16 { margin-bottom: 16px; }
.space-bottom-18 { margin-bottom: 18px; }
.space-block-top-6 { margin: 6px 0 0; }
.space-block-top-8 { margin: 8px 0 0; }
.space-block-top-12 { margin: 12px 0 0; }
.space-block-top-14 { margin: 14px 0 0; }
.space-block-top-18 { margin: 18px 0 0; }
.space-block-4-8 { margin: 4px 0 8px; }
.space-block-14 { margin: 14px 0 0; }
.space-block-14-8 { margin: 14px 0 8px; }
.space-block-18-8 { margin: 18px 0 8px; }

/* ── логотипы организаторов ───────────────────────────────────────────── */

/* Размеры каждой картинки заданы явно, а не через width:auto. Причина: в атрибутах у файлов
   собственная ширина в тысячи пикселей, и при расчете ширины строки браузер берет именно ее -
   контейнер сжимается, логотипы либо встают друг под друга, либо вылезают за край страницы.
   Пропорции сохранены: у трех логотипов они разные, растягивать нельзя. */
.partners { display: flex; align-items: center; gap: clamp(14px, 2vw, 24px); }
.partners img { display: block; flex: 0 0 auto; }
.partners--strip { margin-left: auto; padding-left: clamp(14px, 2vw, 24px); border-left: 1px solid var(--line); }
.partners--strip .logo-politeh { width: 69px; height: 24px; }
.partners--strip .logo-pish { width: 84px; height: 24px; }
.partners--strip .logo-pish-ci { width: 67px; height: 24px; }
.partners--footer { display: none; }
.partners--footer .logo-politeh { width: 70px; height: 24px; }
.partners--footer .logo-pish { width: 84px; height: 24px; }
.partners--footer .logo-pish-ci { width: 67px; height: 24px; }
.partners--hero { margin-bottom: 22px; gap: clamp(18px, 3vw, 34px); flex-wrap: wrap; }
.partners--hero .logo-politeh { width: 155px; height: 46px; }
.partners--hero .logo-pish { width: 160px; height: 46px; }
.partners--hero .logo-pish-ci { width: 129px; height: 46px; }

/* ── экран зала для голосования ───────────────────────────────────────── */

/* Его читают с задних рядов через проектор, поэтому код набран крупнее любого заголовка,
   а QR стоит на белом поле - камеры хуже читают код на цветном. */
.poll-invite { display: flex; gap: clamp(20px, 4vw, 48px); align-items: center; flex-wrap: wrap; }
.poll-qr { padding: 16px; border: 1px solid var(--line); border-radius: var(--radius-md); background: #ffffff; line-height: 0; }
.poll-qr svg { width: clamp(160px, 22vw, 260px); height: auto; }
.poll-code { margin: 6px 0 10px; font-size: clamp(2.5rem, 7vw, 5rem); font-weight: 600; letter-spacing: .04em; line-height: 1; }
.poll-count { font-weight: 600; }

/* ── экран зала для оценок докладов ───────────────────────────────────── */

/* Средняя оценка - единственное, что читают с задних рядов, поэтому она набрана крупнее кода
   голосования. Лента отзывов идет ниже и обычным кеглем: ее читают те, кто ближе, а издалека
   она должна оставаться фоном, а не спорить с цифрой. */
.ocenka-krupno { text-align: center; padding-block: clamp(16px, 4vw, 40px); }
.ocenka-ball { margin: 0 0 6px; font-size: clamp(4rem, 16vw, 11rem); font-weight: 600; line-height: 1; }
.lenta-otzyvov { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 10px; }
.lenta-otzyvov li { display: flex; gap: 12px; align-items: baseline; padding-bottom: 10px; border-bottom: 1px solid var(--line); font-size: clamp(1rem, 1.6vw, 1.4rem); }
.lenta-otzyvov li:last-child { border-bottom: 0; padding-bottom: 0; }
.lenta-ball { flex: none; min-width: 2.2em; text-align: center; font-weight: 600; border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 2px 8px; }
.krupno { font-size: clamp(1.1rem, 2.2vw, 2rem); }

/* ── диаграмма распределения ответов зала ─────────────────────────────── */

/* Вертикальные столбики - решение Сергея 07.09.2026 после прогона: зал читает диаграмму как
   диаграмму, а не как список полос, и высота столбика говорит сама. Крупная доля согласия с
   экрана убрана тем же решением: она уводила внимание с распределения, ради которого экран и
   выводится. Рисуется разметкой и высотой заливки - без картинок и без скриптов, чтобы экран
   под проектором не зависел от исполнения кода в браузере. */
.stolbiki { list-style: none; margin: 18px 0 0; padding: 0; display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: clamp(10px, 3vw, 48px); align-items: end; }
/* Ряд подписи фиксирован, а не `auto`: подпись из двух строк («скорее нет чем да») съедала бы у своего столбика место, и основания столбиков встали бы на разной высоте - диаграмма читалась бы как набор случайных прямоугольников. Проверено картинкой 07.09.2026. */
.stolbik { display: grid; grid-template-rows: auto minmax(0, 1fr) clamp(2.4em, 3.4vw, 3em); gap: 8px; height: clamp(200px, 38vh, 460px); text-align: center; }
.stolbik-chislo { font-weight: 600; font-size: clamp(1.4rem, 3.4vw, 3rem); line-height: 1; }
.stolbik-polosa { display: flex; align-items: flex-end; height: 100%; }
.stolbik-zalivka { display: block; width: 100%; background: var(--blue); border-radius: var(--radius-sm) var(--radius-sm) 0 0; min-height: 3px; }
.stolbik-imya { font-size: clamp(0.95rem, 1.5vw, 1.5rem); line-height: 1.15; }


/* ── адаптация ────────────────────────────────────────────────────────── */

@media (max-width: 1150px) {
  .partners--strip { display: none; }
  .partners--footer { display: flex; margin-bottom: 20px; }
}

@media (max-width: 1050px) {
  .topbar { padding-inline: 24px; }
  .workspace { width: min(100% - 32px, var(--content-max)); grid-template-columns: 208px minmax(0, 1fr); gap: 20px; }
}

@media (max-width: 800px) {
  :root { --anchor-offset: 72px; }
  /* Лента групп на узком экране не липкая: боковое меню кабинета здесь само становится
     липкой полосой, и две полосы подряд съели бы треть экрана телефона. Лента остаётся
     наверху страницы - к ней возвращаются прокруткой вверх, как к заголовку. */
  .gruppy-lenta { position: static; }
  .topbar { position: relative; align-items: flex-start; flex-wrap: wrap; gap: 10px; }
  .topnav { width: 100%; overflow-x: auto; padding-bottom: 2px; }
  .account-label { display: none; }
  .workspace { display: block; width: min(100% - 32px, var(--content-max)); }
  .side-nav {
    position: sticky; top: 0; z-index: 50; width: 100%; margin-top: 14px;
    display: flex; gap: 2px; overflow-x: auto; padding: 6px;
    border-radius: var(--radius-md);
  }
  .side-label, .side-project { display: none; }
  .side-nav a { flex: 0 0 auto; padding-left: 10px; white-space: nowrap; }
  .side-nav a.active::before, .side-nav a[aria-current="page"]::before { left: 8px; right: 8px; top: auto; bottom: 3px; width: auto; height: 2px; border-radius: 2px; }
  .workspace-main { padding-top: 24px; }
  .kpi-grid, .stat-row { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  th { position: static; }
}

@media (max-width: 620px) {
  :root { --anchor-offset: 68px; }
  .topbar { min-height: 60px; padding: 8px 16px; }
  .brand-logo { width: 30px; height: 30px; flex-basis: 30px; }
  .page-shell { width: min(100% - 32px, var(--content-max)); padding-top: 24px; }
  .workspace { width: min(100% - 28px, var(--content-max)); }
  .workspace-header, .panel-head { display: block; }
  .profile { margin-top: 14px; width: fit-content; }
  .panel { padding: 16px 14px; }
  .kpi-grid, .stat-row { grid-template-columns: 1fr; }
  .task-row { grid-template-columns: 26px minmax(0, 1fr); align-items: start; }
  .task-row > :nth-child(n + 3) { grid-column: 2; justify-self: start; text-align: left; }
  .task-date { text-align: left; }
  .view-as-banner { align-items: flex-start; justify-content: flex-start; padding-inline: 16px; }
  .message-stack { padding-inline: 14px; }
  .site-footer-inner { padding-inline: 18px; }
  .hours-norm { align-items: flex-start; }
}

/* Область нажатия не менее 44×44 - § 5.9 ТЗ, требование сформулировано «на касание».
   Поэтому на сенсорном указателе цели вырастают, а на мыши сохраняется рабочая плотность:
   тянуть все кнопки к 44 px на десктопе значило бы жертвовать плотностью там,
   где требование не действует. */
@media (pointer: coarse) {
  .btn, button, input[type="submit"] { min-height: 44px; }
  .btn-small { min-height: 44px; padding: 10px 14px; }
  .icon-button { width: 44px; height: 44px; }
  input, select, textarea { min-height: 44px; }
  input[type="radio"], input[type="checkbox"] { width: 22px; height: 22px; min-height: 22px; }
  .side-nav a, .topnav a, .sort-link { min-height: 44px; }
  .view-as-menu-body a { min-height: 44px; display: flex; align-items: center; }
  .task-row { padding: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; transition: none !important; animation: none !important; }
}

/* ── печать ───────────────────────────────────────────────────────────── */

/* Печатаются и подшиваются: результат теста, ведомости и сводные таблицы организатора,
   страница согласий. A4, без интерфейса, таблицы не рвутся по строке. */
@media print {
  @page { size: A4; margin: 14mm; }
  html, body { background: var(--print-paper) !important; color: var(--print-ink) !important; font-size: 10.5pt; }
  .topbar, .side-nav, .view-as-banner, .site-footer, .skip-link, .message-stack,
  .btn, button, input[type="submit"], .toast, .actions, .partners, .view-as-menu { display: none !important; }
  .workspace, .workspace-main, .page-shell { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; min-height: 0 !important; }
  .panel, .kpi, .table-wrap, .task-row, .artifact, .module, .status-banner, .empty-state {
    break-inside: avoid; border-color: var(--print-line) !important; background: var(--print-paper) !important; box-shadow: none !important;
  }
  .panel { padding: 0 0 8mm !important; border: 0 !important; }
  .status-banner, .callout { animation: none !important; }
  .table-wrap { overflow: visible !important; background: var(--print-paper) !important; }
  table { font-size: 9pt; }
  thead { display: table-header-group; }
  tr, td, th { break-inside: avoid; }
  th { position: static !important; background: var(--print-paper) !important; color: var(--print-ink) !important; border-bottom: 1pt solid var(--print-ink) !important; }
  td { border-bottom: .5pt solid var(--print-line) !important; }
  .tag, .chip { border: .5pt solid var(--print-ink) !important; background: transparent !important; color: var(--print-ink) !important; }
  .progress-with-value progress, .progress, .bar, .mini-progress, .score-ring { display: none !important; }
  .progress-value { color: var(--print-ink) !important; }
  h1 { font-size: 16pt; }
  h2 { font-size: 13pt; }
  a { color: var(--print-ink) !important; text-decoration: none; }
}

/* Узкое числовое поле рядом с кнопкой: окно ответа на экране оценок. */
.width-70 { width: 70px; }

/* Лента групп на странице «Люди сессии»: двенадцать групп и сто семь человек на одной
   странице, и без ленты до последних групп доезжают колесом. Липкая - переход виден с
   любого места; на узком экране прокручивается вбок, как боковое меню кабинета там же. */
.gruppy-lenta {
  position: sticky; top: 64px; z-index: 40;
  margin-top: clamp(16px, 2vw, 24px);
  display: flex; gap: 2px; overflow-x: auto;
  padding: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-md);
  background: var(--paper); box-shadow: var(--shadow-sm);
}
.gruppy-lenta a {
  flex: 0 0 auto;
  display: flex; gap: 6px; align-items: center;
  padding: 7px 10px; border-radius: var(--radius-sm);
  color: var(--ink-soft); font-size: .875rem; font-weight: 500;
  text-decoration: none; white-space: nowrap;
  transition: background-color .12s ease, color .12s ease;
}
.gruppy-lenta a:hover { background: var(--surface); color: var(--ink); text-decoration: none; }
/* Текущая группа различается так же, как текущий раздел в боковом меню: подложка, цвет и
   насыщенность начертания. Метку ставит `section-nav.js`; без скрипта лента работает
   ссылками, просто без подсветки. */
.gruppy-lenta a.active, .gruppy-lenta a[aria-current="location"] {
  background: var(--blue-soft); color: var(--blue); font-weight: 600;
}
/* Сколько человек в группе. Организатор ищет группу глазом по обозначению, а число нужно
   реже - поэтому тише и мельче, но не серее нормы читаемости. */
.gruppy-lenta-skolko { color: var(--ink-faint); font-size: .75rem; font-variant-numeric: tabular-nums; }
.gruppy-lenta a.active .gruppy-lenta-skolko, .gruppy-lenta a[aria-current="location"] .gruppy-lenta-skolko { color: inherit; }

/* Где раздел останавливается при переходе по ленте. Общий `scroll-padding-top` страницы (80)
   считает только шапку сайта, а под ней стоит ещё лента групп высотой 49 - без добавки
   заголовок группы уезжал бы под неё. Складывать оба числа не надо: отступ страницы уже учтён,
   здесь добавляется только лента. Число выбрано так, чтобы заголовок встал сразу под лентой и
   при этом раздел считался текущим - подсветка в ленте берёт тот раздел, что выше её края. */
.lyudi-gruppa { scroll-margin-top: 36px; }

/* Сетка лиц на странице «Люди сессии». Снимки приходят и портретом, и ландшафтом,
   фиксированная рамка держит сетку ровной. */
.lyudi-setka {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 18px;
}
.chelovek {
  background: var(--paper);
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 12px;
}
.chelovek p { margin: 4px 0; }
.chelovek-foto {
  display: block;
  width: 100%;
  /* Пропорция, а не фиксированная высота: карточки тянутся по ширине экрана, и при
     постоянной высоте на широком мониторе в рамку попадала бы всё меньшая доля кадра.
     При 3:4 доля видимого одинакова на любой ширине. */
  aspect-ratio: 3 / 4;
  object-fit: cover;
  /* Обрезка от верха кадра, а не от центра. Снимки сделаны телефоном вертикально: кадр
     вдвое выше рамки, человек стоит в полный рост, лицо в верхней трети. Обрезка по центру
     приходилась на грудь и срезала головы - Климова, Емельянова, Орлегова (12.09.2026).
     От верха кадра ничего выше головы не теряется по определению. */
  object-position: center top;
  border-radius: 8px;
  background: var(--surface);
}
.chelovek-bez-foto {
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 48px;
  color: var(--disabled-ink);
  background: var(--surface-strong);
}
.chelovek textarea { width: 100%; }
/* Запись отбита слева полосой: это чужие слова, а не подпись к фотографии. */
.zapis {
  border-left: 3px solid var(--line-strong);
  padding-left: 8px;
}