/* =====================================================================
   TeamGuide 2.0 «Сумерки» — токены, шрифты, компоненты.
   Подключать ПОСЛЕДНИМ из css (после base.css и всех модульных),
   тогда слой совместимости перекрасит старые экраны без правки их CSS.
   Тема: атрибут data-theme="light" | "dark" | "auto" на <html> (ставит js/core/theme.js).
   С TeamGuide 2.0 — основной и единственный дизайн; подключается последним в index.html.
   Цвет клиента (--tg-acc и производные) переопределяет js/core/theme.js из config.theme.accent.
   ===================================================================== */

/* ---------- 1. Шрифты (OFL, лежат в fonts/, работают офлайн) ---------- */
@font-face { font-family: "Geologica"; font-weight: 200; font-display: swap; src: url("../fonts/geologica-cyrillic-200-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 200; font-display: swap; src: url("../fonts/geologica-latin-200-normal.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: "Geologica"; font-weight: 300; font-display: swap; src: url("../fonts/geologica-cyrillic-300-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 300; font-display: swap; src: url("../fonts/geologica-latin-300-normal.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: "Geologica"; font-weight: 400; font-display: swap; src: url("../fonts/geologica-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 400; font-display: swap; src: url("../fonts/geologica-latin-400-normal.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: "Geologica"; font-weight: 500; font-display: swap; src: url("../fonts/geologica-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Geologica"; font-weight: 500; font-display: swap; src: url("../fonts/geologica-latin-500-normal.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: "Onest"; font-weight: 400; font-display: swap; src: url("../fonts/onest-cyrillic-400-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 400; font-display: swap; src: url("../fonts/onest-latin-400-normal.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: "Onest"; font-weight: 500; font-display: swap; src: url("../fonts/onest-cyrillic-500-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 500; font-display: swap; src: url("../fonts/onest-latin-500-normal.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: "Onest"; font-weight: 600; font-display: swap; src: url("../fonts/onest-cyrillic-600-normal.woff2") format("woff2"); unicode-range: U+0301, U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116; }
@font-face { font-family: "Onest"; font-weight: 600; font-display: swap; src: url("../fonts/onest-latin-600-normal.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; }

/* ---------- 2. Токены. Светлая — по умолчанию ---------- */
:root {
  /* поверхности */
  --tg-bg: #F3F0EB;          /* фон экрана */
  --tg-s1: #FFFFFF;          /* карточки, плитки, остров */
  --tg-s2: #F0ECE5;          /* вложенные плашки, аватары, поля */
  --tg-s3: #E4DED4;          /* дорожка кольца, бегунок сегмента */
  --tg-line: rgb(60 45 25 / .09);
  /* текст */
  --tg-fg: #1F1B17;          /* заголовки и основной */
  --tg-fg-2: #3A332C;        /* абзацы */
  --tg-muted: #6F655B;       /* подписи, 5.0:1 на фоне */
  /* акцент — латунь; для клиента меняется из config.js */
  --tg-acc: #8C6428;
  --tg-acc-strong: #6E4E1E;  /* подписи акцентом на светлом */
  --tg-on-acc: #FFFFFF;
  --tg-acc-tint: rgb(140 100 40 / .10);
  --tg-hi: #8C6428;          /* крупные цифры героя */
  --tg-glow: rgb(200 155 85 / .18);
  /* состояния */
  --tg-ok: #277A50;  --tg-warn: #A35C12;  --tg-bad: #BE4A35;  --tg-info: #3A69A8;
  /* служебные */
  --tg-dock: rgb(255 255 255 / .92);
  --tg-dep: #F6F2EC;
  --tg-knob: #FFFFFF;
  --tg-shadow: 0 1px 2px rgb(60 45 25 / .05), 0 10px 24px -14px rgb(60 45 25 / .20);
  --tg-shadow-pop: 0 18px 50px -18px rgb(30 20 10 / .35);
  --tg-scrim: rgb(20 14 8 / .45);
  /* форма */
  --tg-r: 22px; --tg-r-md: 16px; --tg-r-sm: 12px; --tg-r-sheet: 28px; --tg-r-pill: 999px;
  /* шрифты */
  --tg-f-ui: "Onest", -apple-system, "Segoe UI", Roboto, sans-serif;
  --tg-f-num: "Geologica", "Onest", -apple-system, sans-serif;
  color-scheme: light;
}
:root[data-theme="dark"] {
  --tg-bg: #2C2925; --tg-s1: #36322D; --tg-s2: #423D37; --tg-s3: #4D4740; --tg-line: rgb(255 255 255 / .09);
  --tg-fg: #F5F0E9; --tg-fg-2: #DDD5CA; --tg-muted: #ADA399;
  --tg-acc: #E0C18C; --tg-acc-strong: #F0D9AE; --tg-on-acc: #1B150C; --tg-acc-tint: rgb(224 193 140 / .14);
  --tg-hi: #F0D9AE; --tg-glow: rgb(224 193 140 / .16);
  --tg-ok: #86CDA4; --tg-warn: #E8A866; --tg-bad: #EA8B78; --tg-info: #93B4DE;
  --tg-dock: rgb(54 50 45 / .94); --tg-dep: rgb(255 255 255 / .045); --tg-knob: #F5F0E9;
  --tg-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
  --tg-shadow-pop: 0 18px 50px -18px rgb(0 0 0 / .6);
  --tg-scrim: rgb(10 8 6 / .55);
  color-scheme: dark;
}
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] {
  --tg-bg: #2C2925; --tg-s1: #36322D; --tg-s2: #423D37; --tg-s3: #4D4740; --tg-line: rgb(255 255 255 / .09);
  --tg-fg: #F5F0E9; --tg-fg-2: #DDD5CA; --tg-muted: #ADA399;
  --tg-acc: #E0C18C; --tg-acc-strong: #F0D9AE; --tg-on-acc: #1B150C; --tg-acc-tint: rgb(224 193 140 / .14);
  --tg-hi: #F0D9AE; --tg-glow: rgb(224 193 140 / .16);
  --tg-ok: #86CDA4; --tg-warn: #E8A866; --tg-bad: #EA8B78; --tg-info: #93B4DE;
  --tg-dock: rgb(54 50 45 / .94); --tg-dep: rgb(255 255 255 / .045); --tg-knob: #F5F0E9;
  --tg-shadow: inset 0 1px 0 rgb(255 255 255 / .04);
  --tg-shadow-pop: 0 18px 50px -18px rgb(0 0 0 / .6);
  --tg-scrim: rgb(10 8 6 / .55);
  color-scheme: dark;
} }

/* ---------- 3. Слой совместимости: старые имена → новые ----------
   Старые экраны перекрашиваются сразу. Удалите этот блок, когда все
   модули перейдут на --tg-*. Имена взяты из BRANDBOOK 1.x —
   сверьте с base.css: если какого-то нет, строка просто ничего не делает. */
:root, :root[data-theme] {
  --cream: var(--tg-bg); --cream-3: var(--tg-s3); --soft-line: var(--tg-line); --field-line: color-mix(in srgb, var(--tg-fg) 16%, transparent); --muted-2: var(--tg-muted);
  --warning-bg: color-mix(in srgb, var(--tg-warn) 14%, transparent); --cream-2: var(--tg-s2); --paper: var(--tg-s1); --paper-2: var(--tg-s2); --field: var(--tg-s2);
  --line: var(--tg-line);
  --black: var(--tg-fg); --ink: var(--tg-fg-2); --muted-label: var(--tg-muted);
  --accent: var(--tg-acc); --accent-dark: var(--tg-acc-strong); --on-accent: var(--tg-on-acc); --clay-tint: var(--tg-acc-tint);
  --ok: var(--tg-ok); --ok-bg: color-mix(in srgb, var(--tg-ok) 14%, transparent);
  --danger: var(--tg-bad); --danger-text: var(--tg-bad); --danger-bg: color-mix(in srgb, var(--tg-bad) 14%, transparent);
  --warning: var(--tg-warn); --info: var(--tg-info);
  --graphite-panel: var(--tg-s1);
  --radius: var(--tg-r); --radius-sm: var(--tg-r-sm); --radius-md: var(--tg-r-md); --radius-lg: var(--tg-r); --radius-panel: var(--tg-r-sheet);
  --shadow-card: var(--tg-shadow); --shadow: var(--tg-shadow); --shadow-tile: var(--tg-shadow);
  --font-head: var(--tg-f-num); --font-body: var(--tg-f-ui);
}
/* Типографика 1.x была прописным Oswald. В 2.0 заголовки — обычный регистр, тонкий Geologica. */
body { font-family: var(--tg-f-ui); background: var(--tg-bg); color: var(--tg-fg); }
.page-title { font-family: var(--tg-f-num); font-weight: 300; text-transform: none; letter-spacing: -.02em; }
.card-title, .section { font-family: var(--tg-f-num); font-weight: 300; text-transform: none; letter-spacing: -.01em; }
.label-caps, .meta-caps { font-family: var(--tg-f-ui); font-weight: 500; font-size: 11px; letter-spacing: .14em; }

/* ---------- 4. Базовые элементы ---------- */
.tg-num { font-family: var(--tg-f-num); font-weight: 200; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; display: inline-block; }
.tg-lbl { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tg-muted); font-weight: 500; }
.tg-title { margin: 0; font-family: var(--tg-f-num); font-weight: 300; font-size: 30px; line-height: 1.1; letter-spacing: -.02em; color: var(--tg-fg); }
.tg-sub { margin: 4px 0 0; color: var(--tg-muted); font-size: 14px; }
.tg-sub b { color: var(--tg-acc); font-weight: 600; }
.tg-sec { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tg-sec h4 { margin: 0; font-family: var(--tg-f-num); font-weight: 300; font-size: 20px; }
.tg-sec a, .tg-sec .tg-link { color: var(--tg-acc); font-size: 13px; text-decoration: none; }

.tg-card { background: var(--tg-s1); border: 1px solid var(--tg-line); border-radius: var(--tg-r); padding: 16px; box-shadow: var(--tg-shadow); }
.tg-glow { border-color: color-mix(in srgb, var(--tg-acc) 24%, transparent);
  background: radial-gradient(120% 90% at 100% 0%, var(--tg-glow) 0%, transparent 60%), var(--tg-s1); }

.tg-btn { border: 0; border-radius: 14px; background: var(--tg-acc); color: var(--tg-on-acc); padding: 11px 18px; font: 600 14px var(--tg-f-ui); min-height: 44px; cursor: pointer; }
.tg-btn.ghost { background: var(--tg-s2); color: var(--tg-fg); }
.tg-btn[disabled] { background: color-mix(in srgb, var(--tg-ok) 16%, var(--tg-s1)); color: var(--tg-ok); cursor: default; }

/* Капсулы: фильтры ленты, подразделения, «Приду / Не смогу», реакции */
.tg-chips { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; margin: 0 -16px; padding: 0 16px; }
.tg-chips::-webkit-scrollbar { display: none; }
.tg-chip { flex: none; border: 1px solid var(--tg-line); background: var(--tg-s1); color: var(--tg-fg); border-radius: var(--tg-r-pill); padding: 7px 13px; font: 500 13px var(--tg-f-ui);
  display: inline-flex; gap: 6px; align-items: center; min-height: 34px; box-shadow: var(--tg-shadow); cursor: pointer; }
.tg-chip span { color: var(--tg-muted); font-size: 12px; }
.tg-chip[aria-pressed="true"] { background: var(--tg-fg); color: var(--tg-bg); border-color: var(--tg-fg); }
.tg-chip[aria-pressed="true"] span { color: inherit; opacity: .65; }
.tg-chip.soft[aria-pressed="true"] { background: var(--tg-acc-tint); color: var(--tg-acc); border-color: color-mix(in srgb, var(--tg-acc) 45%, transparent); }

/* Метки состояния — всегда со словом */
.tg-pill { display: inline-flex; align-items: center; gap: 5px; border-radius: var(--tg-r-pill); padding: 3px 9px; font-size: 12px; font-weight: 500; background: var(--tg-s2); color: var(--tg-fg); }
.tg-pill.ok { background: color-mix(in srgb, var(--tg-ok) 16%, transparent); color: var(--tg-ok); }
.tg-pill.warn { background: color-mix(in srgb, var(--tg-warn) 16%, transparent); color: var(--tg-warn); }
.tg-pill.bad { background: color-mix(in srgb, var(--tg-bad) 16%, transparent); color: var(--tg-bad); }

/* ---------- 5. Кольцо (рисует js/core/ring.js) ---------- */
.tg-ring-wrap { position: relative; display: inline-grid; place-items: center; flex: none; }
.tg-ring { display: block; }
.tg-ring-wrap > .tg-ring { width: 100% !important; height: 100% !important; }   /* модульные правила вида «.x svg{width:18px}» не сжимают кольцо */
.tg-ring circle { fill: none; }
.tg-ring .tr { stroke: var(--tg-s3); }
.tg-ring .pr { stroke: var(--rc, var(--tg-acc)); stroke-linecap: round; transform: rotate(-90deg); transform-origin: 50% 50%; }
.tg-ring-wrap > .rc { position: absolute; inset: 0; display: grid; place-items: center; text-align: center; line-height: 1.05; }

/* Плитки-показатели с кольцом */
.tg-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tg-tile { display: flex; flex-direction: column; gap: 8px; min-width: 0; padding: 14px; }
.tg-tile .row { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.tg-tile .row > span:first-child { white-space: nowrap; min-width: 0; }
.tg-tile .tg-num { font-size: 32px; line-height: 1; }
.tg-tile .u { font-size: 14px; color: var(--tg-muted); margin-left: 3px; }
.tg-tile small { color: var(--tg-muted); font-size: 12px; line-height: 1.35; }
.tg-tile small.good { color: var(--tg-ok); }
.tg-tile.attn { border-color: color-mix(in srgb, var(--tg-warn) 40%, transparent); }
.tg-tile.attn .tg-num { color: var(--tg-warn); }
@media (min-width: 1024px) { .tg-tiles { grid-template-columns: repeat(4, 1fr); } }

/* Полоса прогресса и сегментная полоса */
.tg-bar { height: 4px; border-radius: 2px; background: var(--tg-s3); overflow: hidden; }
.tg-bar i { display: block; height: 100%; border-radius: 2px; background: var(--rc, var(--tg-acc)); transform-origin: left; transform: scaleX(var(--v)); }
.tg-segbar { display: flex; gap: 4px; height: 6px; transform-origin: left; transform: scaleX(var(--v, 1)); }
.tg-segbar i { border-radius: 3px; background: var(--tg-hi); }
.tg-segbar i.w { background: var(--tg-warn); }
.tg-segbar i.d { background: var(--tg-muted); opacity: .45; }

/* ---------- 6. Герой «На смене сейчас» (бывший графитовый «кошелёк») ---------- */
.tg-hero { display: flex; flex-direction: column; gap: 14px; }
.tg-hero-n { display: flex; align-items: baseline; gap: 10px; }
.tg-hero-n .tg-num { font-size: 84px; line-height: .9; color: var(--tg-hi); }
.tg-hero-n span:last-child { color: var(--tg-muted); font-size: 14px; }
.tg-live { display: inline-flex; gap: 6px; align-items: center; font-size: 12px; color: var(--tg-muted); }
.tg-live::before { content: ""; width: 6px; height: 6px; border-radius: 50%; background: var(--tg-ok); box-shadow: 0 0 0 3px color-mix(in srgb, var(--tg-ok) 25%, transparent); }
.tg-deps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.tg-dep { border-radius: 14px; padding: 10px; background: var(--tg-dep); display: flex; flex-direction: column; gap: 1px; }
.tg-dep small { font-size: 11.5px; color: var(--tg-muted); }
.tg-dep .tg-num { font-size: 22px; }
.tg-dep.short small:last-child { color: var(--tg-warn); }

/* ---------- 7. Лента ---------- */
.tg-day { font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--tg-muted); font-weight: 500; }
.tg-tl { display: flex; flex-direction: column; gap: 10px; border-left: 1px solid var(--tg-line); margin-left: 5px; padding-left: 16px; }
.tg-post { position: relative; display: flex; flex-direction: column; gap: 10px; }
.tg-post::before { content: ""; position: absolute; left: -22.5px; top: 20px; width: 11px; height: 11px; border-radius: 50%; background: var(--k, var(--tg-muted)); box-shadow: 0 0 0 4px var(--tg-bg); }
.tg-post h3 { margin: 0; font-size: 16.5px; font-weight: 600; line-height: 1.3; }
.tg-post p { margin: 0; color: var(--tg-muted); font-size: 13.5px; }
.tg-post .meta { display: flex; gap: 8px; align-items: center; font-size: 12px; color: var(--tg-muted); }
.tg-post .meta b { color: var(--k); font-weight: 600; letter-spacing: .1em; text-transform: uppercase; font-size: 10.5px; }
/* цвет точки по типу: style="--k: var(--tg-acc)" — опрос; var(--tg-info) — событие; var(--tg-bad) — важное/стоп */
.tg-must { display: flex; gap: 14px; align-items: center; }
.tg-must > div { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.tg-opt { position: relative; display: flex; justify-content: space-between; gap: 10px; width: 100%; text-align: left; border: 1px solid var(--tg-line); background: var(--tg-s2); border-radius: 12px; padding: 10px 12px; overflow: hidden; font-size: 14px; color: var(--tg-fg); cursor: pointer; }
.tg-opt > i { position: absolute; inset: 0; background: color-mix(in srgb, var(--tg-acc) 16%, transparent); transform-origin: left; transform: scaleX(var(--v)); }
.tg-opt > span { position: relative; }
.tg-opt[aria-pressed="true"] { border-color: color-mix(in srgb, var(--tg-acc) 60%, transparent); }
.tg-date { width: 52px; flex: none; border-radius: 14px; background: var(--tg-s2); text-align: center; padding: 6px 0; line-height: 1.1; }
.tg-date .tg-num { font-size: 24px; font-weight: 300; }
.tg-date small { display: block; font-size: 10.5px; color: var(--tg-muted); letter-spacing: .1em; text-transform: uppercase; }

/* ---------- 8. Меню ---------- */
.tg-hubs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.tg-hub { text-align: left; border: 1px solid var(--tg-line); background: var(--tg-s1); border-radius: 20px; padding: 14px; display: flex; flex-direction: column; gap: 14px; box-shadow: var(--tg-shadow); color: var(--tg-fg); cursor: pointer; }
.tg-hub[aria-pressed="true"], .tg-hub.is-active { border-color: color-mix(in srgb, var(--tg-acc) 55%, transparent); background: radial-gradient(130% 110% at 0% 0%, var(--tg-glow), transparent 60%), var(--tg-s1); }
.tg-ico { width: 34px; height: 34px; border-radius: 11px; display: grid; place-items: center; background: var(--tg-acc-tint); color: var(--tg-acc); flex: none; }
.tg-dish { width: 100%; text-align: left; border: 1px solid var(--tg-line); background: var(--tg-s1); border-radius: 20px; padding: 10px; display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; align-items: center; box-shadow: var(--tg-shadow); color: var(--tg-fg); cursor: pointer; }
.tg-dish img { width: 76px; height: 76px; border-radius: 16px; object-fit: cover; background: var(--tg-s2); }
.tg-dish.stop { opacity: .6; }
.tg-dish.stop b { text-decoration: line-through; text-decoration-color: var(--tg-bad); }
.tg-facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.tg-fact { background: var(--tg-s1); border: 1px solid var(--tg-line); border-radius: 16px; padding: 10px 12px; display: flex; flex-direction: column; gap: 2px; box-shadow: var(--tg-shadow); }
.tg-fact .tg-num { font-size: 22px; font-weight: 300; }
.tg-fact small { color: var(--tg-muted); font-size: 11.5px; }
.tg-nut { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; text-align: center; }
.tg-nut .rc .tg-num { font-size: 13px; font-weight: 400; letter-spacing: 0; }
.tg-nut small { display: block; color: var(--tg-muted); font-size: 11.5px; margin-top: 4px; }

/* ---------- 9. Личный кабинет ---------- */
.tg-cal { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; text-align: center; }
.tg-cal .wd { font-size: 10.5px; color: var(--tg-muted); letter-spacing: .08em; text-transform: uppercase; padding-bottom: 2px; }
.tg-cal .d { aspect-ratio: 1; max-width: 100%; border-radius: 10px; display: grid; place-items: center; font: 300 14px var(--tg-f-num); color: var(--tg-muted); }
.tg-cal .d.w { background: var(--tg-s2); color: var(--tg-fg); }
.tg-cal .d.w.past { background: var(--tg-acc-tint); color: var(--tg-hi); }
.tg-cal .d.today { outline: 1.5px solid var(--tg-acc); outline-offset: -1.5px; color: var(--tg-acc); }
.tg-cal .d.vac { background: color-mix(in srgb, var(--tg-info) 18%, transparent); color: var(--tg-info); }

/* Списки-группы (сотрудники, пункты ЛК) */
.tg-list { list-style: none; margin: 0; padding: 0; border-radius: var(--tg-r); background: var(--tg-s1); border: 1px solid var(--tg-line); overflow: hidden; box-shadow: var(--tg-shadow); }
.tg-list li + li { border-top: 1px solid var(--tg-line); }
.tg-list .row { width: 100%; border: 0; background: none; color: var(--tg-fg); text-align: left; display: grid; grid-template-columns: 38px minmax(0, 1fr) auto; gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.tg-list .row:active { background: var(--tg-s2); }
.tg-list small { color: var(--tg-muted); font-size: 12.5px; display: block; }
.tg-ava { width: 38px; height: 38px; border-radius: 50%; background: var(--tg-s2); display: grid; place-items: center; font-weight: 600; font-size: 13px; border: 1px solid var(--tg-line); position: relative; flex: none; }
.tg-ava > i { position: absolute; right: -1px; bottom: -1px; width: 11px; height: 11px; border-radius: 50%; border: 2px solid var(--tg-s1); background: var(--st, var(--tg-ok)); }

/* ---------- 10. Сегменты, переключатель, остров, лист, тост ---------- */
.tg-seg { display: flex; padding: 4px; border-radius: 14px; background: var(--tg-s1); border: 1px solid var(--tg-line); }
.tg-seg button { flex: 1; border: 0; background: none; border-radius: 10px; padding: 8px 6px; font: 500 13px var(--tg-f-ui); color: var(--tg-muted); cursor: pointer; }
.tg-seg button[aria-pressed="true"] { background: var(--tg-s3); color: var(--tg-fg); }

.tg-sw { width: 52px; height: 30px; border-radius: var(--tg-r-pill); border: 0; background: var(--tg-s3); position: relative; flex: none; cursor: pointer; }
.tg-sw::after { content: ""; position: absolute; top: 3px; left: 3px; width: 24px; height: 24px; border-radius: 50%; background: var(--tg-knob); box-shadow: 0 1px 3px rgb(0 0 0 / .25); transition: transform .22s cubic-bezier(.34, 1.56, .64, 1); }
.tg-sw[aria-checked="true"] { background: var(--tg-bad); }
.tg-sw[aria-checked="true"]::after { transform: translateX(22px); }

.tg-dock { display: flex; justify-content: space-between; align-items: center; padding: 6px; border-radius: var(--tg-r-pill); background: var(--tg-dock); border: 1px solid var(--tg-line); box-shadow: var(--tg-shadow-pop);
  -webkit-backdrop-filter: saturate(1.4) blur(14px); backdrop-filter: saturate(1.4) blur(14px); }
.tg-dock button { border: 0; background: none; color: var(--tg-muted); height: 44px; min-width: 44px; border-radius: var(--tg-r-pill); display: inline-flex; gap: 6px; align-items: center; justify-content: center; padding: 0 11px; font: 600 13px var(--tg-f-ui); cursor: pointer; }
.tg-dock button[aria-current="page"] { background: var(--tg-fg); color: var(--tg-bg); }
.tg-dock button .t { display: none; }
.tg-dock button[aria-current="page"] .t { display: inline; }
.tg-dock .plus { background: var(--tg-acc); color: var(--tg-on-acc); width: 44px; padding: 0; }

.tg-scrim { position: fixed; inset: 0; z-index: 50; background: var(--tg-scrim); display: flex; align-items: flex-end; justify-content: center; }
.tg-sheet { width: 100%; max-width: 560px; max-height: 92dvh; overflow-y: auto; background: var(--tg-bg); color: var(--tg-fg); border-radius: var(--tg-r-sheet) var(--tg-r-sheet) 0 0; border: 1px solid var(--tg-line); border-bottom: 0;
  padding: 10px max(18px, env(safe-area-inset-left, 0px)) calc(24px + env(safe-area-inset-bottom, 0px)) max(18px, env(safe-area-inset-right, 0px)); display: flex; flex-direction: column; gap: 14px; }
.tg-sheet .grab { width: 40px; height: 4px; border-radius: 2px; background: var(--tg-s3); align-self: center; }
@media (min-width: 1024px) { .tg-scrim { align-items: center; } .tg-sheet { border-radius: var(--tg-r-sheet); border-bottom: 1px solid var(--tg-line); max-height: 86dvh; } .tg-sheet .grab { display: none; } }

.tg-toast { position: fixed; left: 50%; translate: -50% 0; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); z-index: 60; padding: 11px 16px; border-radius: 14px; font-size: 14px; background: var(--tg-fg); color: var(--tg-bg); max-width: calc(100% - 32px); box-shadow: var(--tg-shadow-pop); }

/* Нажатие и фокус */
.tg-chip:active, .tg-hub:active, .tg-dish:active, .tg-btn:active, .tg-opt:active { transform: scale(.98); }
:where(.tg-chip, .tg-hub, .tg-dish, .tg-btn, .tg-opt, .tg-seg button, .tg-sw, .tg-dock button, .tg-list .row):focus-visible { outline: 2px solid var(--tg-acc); outline-offset: 2px; }

/* Круговая смена темы (View Transitions) — анимацию задаёт theme-switch.js */
::view-transition-old(root), ::view-transition-new(root) { animation: none; mix-blend-mode: normal; }

@media (prefers-reduced-motion: reduce) {
  .tg-sw::after { transition: none; }
  .tg-chip:active, .tg-hub:active, .tg-dish:active, .tg-btn:active, .tg-opt:active { transform: none; }
}

/* ---------- 11. Экраны TeamGuide под 2.0 (общие классы 1.x, которые остались в разметке) ----------
   Прописной Oswald → обычный регистр: заголовки и цифры — Geologica, кнопки и вкладки — Onest.
   Здесь — регистр, шрифты, скругления и поверхности для классов модулей; новые экраны пишутся на tg-*. */
:root[data-theme] { --accent-rgb: 140,100,40; }
:root[data-theme="dark"] { --accent-rgb: 224,193,140; }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] { --accent-rgb: 224,193,140; } }

/* заголовки экранов и карточек */
h1, h2, h3, .headline, .page-title, .brand-name, .boot-name, .feed-title, .article-title, .cat-name, .tile-title, .item-title,
.lk-name, .lk2-name, .emp-head-name, .rq-month, .bd-nav b, .bd-head b, .ts-soon b, .auth-aside-title, .mg-main b, .sg-dept-name,
.cal-head b, .lk-mlabel, .lk-next b, .lk2-next b, .quick-tile b, .comments-head, .isl-panel-head span:first-child, .ac-ob b, .ac-train b, .ac-q {
  font-family: var(--tg-f-num); font-weight: 300; text-transform: none; letter-spacing: -.015em; }
.page-title { font-size: 30px; line-height: 1.1; }
.feed-title, .tile-title, .cat-name, .mg-main b, .lk-next b, .quick-tile b { font-weight: 400; }
/* заголовки секций */
.lk-sec-title, .block-title { font-family: var(--tg-f-num); font-weight: 300; font-size: 19px; text-transform: none; letter-spacing: -.01em; color: var(--tg-fg); }
/* мелкие подписи прописными остаются, но Onest */
.who-group, .grp-label, .demo-badge, .ts-grp td, .feed-badge, .rubric, .isl-gt, .ac-head small, .tp-ph {
  font-family: var(--tg-f-ui); font-weight: 500; letter-spacing: .12em; }
/* крупные цифры */
.mg-card b, .ts-tile b, .ts-pstats b, .pers-stat b, .total b, .rd-stats b, .nu-c b, .cp-kcal b, .lk2-total > b, .fd-date b, .tp-kpi b,
.ac-streak b, .ac-done .page-title {
  font-family: var(--tg-f-num); font-weight: 200; letter-spacing: -.03em; font-variant-numeric: tabular-nums lining-nums; }
.tp-kpi b, .ts-tile b, .mg-card b { font-size: 30px; }
/* кнопки, пилюли, вкладки */
.btn, .pill, .subnav-pill, .fd-tab, .lk2-tab, .ts-tab, .side-item, .bn-btn, .auth-login-btn, .lk-logout {
  font-family: var(--tg-f-ui); font-weight: 600; text-transform: none; letter-spacing: 0; }
.btn { border-radius: 14px; font-size: 14px; min-height: 44px; }
.btn-sm { min-height: 34px; font-size: 13px; border-radius: 12px; }
.btn-round { box-shadow: none; }
.pill, .subnav-pill { border-radius: var(--tg-r-pill); border-color: var(--tg-line); background: var(--tg-s1); color: var(--tg-fg); box-shadow: var(--tg-shadow); font-weight: 500; }
.pill.active, .subnav-pill.active { background: var(--tg-fg); border-color: var(--tg-fg); color: var(--tg-bg); }
.side-item { font-weight: 500; font-size: 14.5px; }
.side-item.active { background: var(--tg-fg); color: var(--tg-bg); }
/* карточки 1.x: мягкая тень и тонкая линия вместо рамок */
.mg-card, .tp-kpi, .ac-train, .ac-map, .ac-wi, .ac-steps, .ac-mentor, .tp-ptable, .lk2-todo, .feed-card, .quick-tile {
  border-radius: var(--tg-r); border-color: var(--tg-line); box-shadow: var(--tg-shadow); }
/* нижний лист */
.sheet { background: var(--tg-bg); border-radius: var(--tg-r-sheet) var(--tg-r-sheet) 0 0; }
.sheet-head h3 { font-size: 22px; }
@media (min-width: 1024px) { .sheet { border-radius: var(--tg-r-sheet); } }

/* ---------- 12. Движение (вызовы — js/core/dusk-motion.js) ---------- */
.view-enter { animation: none; }                                  /* вход экрана делает enter() каскадом */
.sheet { transition: transform .42s cubic-bezier(.32, 1.22, .5, 1); }
.sheet-backdrop { background: var(--tg-scrim); transition: opacity .3s ease; }
.toast { background: var(--tg-fg); color: var(--tg-bg); border-radius: 14px; transition: opacity .2s ease, transform .4s cubic-bezier(.34, 1.56, .64, 1); transform: translate(-50%, 18px) scale(.96); }
.toast.show { transform: translate(-50%, 0) scale(1); }
@media (min-width: 1024px) { .sheet { transition: transform .42s cubic-bezier(.32, 1.22, .5, 1), opacity .25s ease; } }
@media (prefers-reduced-motion: reduce) { .sheet, .toast, .sheet-backdrop { transition: none; } }
/* экран входа: кнопка без цветной тени; панель бренда в тёмной теме — глубже, чтобы белый логотип читался */
.auth-login-btn { box-shadow: none; border-radius: 14px; }
:root[data-theme="dark"] .auth-aside { background: color-mix(in srgb, var(--brand) 40%, #1B150C); }
@media (prefers-color-scheme: dark) { :root[data-theme="auto"] .auth-aside { background: color-mix(in srgb, var(--brand) 40%, #1B150C); } }