@font-face {
font-family: "Inter";
src: url("./fonts/InterVariable.woff2") format("woff2");
font-style: normal;
font-weight: 100 900;
font-display: swap;
}
/* п. 6а: запасной шрифт с метриками Inter. Пока файл Inter в пути, текст набирается
локальным Arial с поправкой размера, и замена шрифта не перестраивает строки.
Высоты — из InterVariable 4 (2048 ед., восходящая 1984, нисходящая 494), делённые на
поправку; поправка измерена по ширине русских строк сайта: обычный 99 % (Inter/Arial
0,999 при 400), полужирный — Arial Bold 96,8 % (1,000 при 650). */
@font-face {
font-family: "Inter Fallback";
src: local("Arial"), local("ArialMT"), local("Helvetica"), local("Liberation Sans");
font-weight: 100 549;
size-adjust: 99%;
ascent-override: 97.85%;
descent-override: 24.37%;
line-gap-override: 0%;
}
@font-face {
font-family: "Inter Fallback";
src: local("Arial Bold"), local("Arial-BoldMT"), local("Helvetica Bold"), local("Liberation Sans Bold");
font-weight: 550 900;
size-adjust: 96.8%;
ascent-override: 100.08%;
descent-override: 24.92%;
line-gap-override: 0%;
}
:root {
--tm-font-sans: Inter, "Inter Fallback", "Segoe UI", sans-serif;
--tm-indigo: #6366f1;
--tm-purple: #a855f7;
--tm-sky: #0ea5e9;
--tm-teal: #14b8a6;
--tm-lime: #84cc16;
--tm-coral: #f97316;
--tm-red: #ef4444;
--tm-yellow: #eab308;
--tm-ink: #1f1830;
--tm-ink-soft: #4f485c;
--tm-muted: #746d82;
--tm-canvas: #f8f8fc;
--tm-panel: #ffffff;
--tm-panel-soft: #f2f1f8;
--tm-line: #e8e5ee;
--tm-line-strong: #d8d3e1;
--tm-inverse: #221a35;
--tm-white: #ffffff;
--tm-space-1: 4px;
--tm-space-2: 8px;
--tm-space-3: 12px;
--tm-space-4: 16px;
--tm-space-5: 20px;
--tm-space-6: 24px;
--tm-space-8: 32px;
--tm-space-10: 40px;
--tm-space-12: 48px;
--tm-space-16: 64px;
--tm-radius-sm: 10px;
--tm-radius-md: 16px;
--tm-radius-lg: 24px;
--tm-radius-xl: 32px;
--tm-radius-pill: 999px;
--tm-shadow-card: 0 18px 50px rgba(50, 39, 82, .08);
--tm-shadow-float: 0 24px 70px rgba(50, 39, 82, .16);
--tm-shadow-dialog: 0 34px 100px rgba(31, 24, 48, .28);
--tm-focus: 0 0 0 3px rgba(99, 102, 241, .28);
--tm-font-caption: .75rem;
--tm-font-body: 1rem;
--tm-font-title: clamp(1.25rem, 2vw, 1.75rem);
--tm-font-display: clamp(2rem, 5vw, 4.75rem);
--tm-leading-tight: 1.12;
--tm-leading-body: 1.55;
--tm-duration-fast: 160ms;
--tm-duration-base: 220ms;
--tm-layer-content: 0;
--tm-layer-sticky: 30;
--tm-layer-popover: 200;
--tm-layer-dialog: 400;
--tm-layer-toast: 600;
--tm-layer-skip: 1000;
/* DEC-52 (2026-09-24): кнопки-капсулы. Размеры и тона, которых не было
в наборе; цвета акцента выводятся в правилах через color-mix, чтобы
`data-accent` перекрашивал и кнопки. */
--tm-red-soft: #fef0f0;
--tm-red-strong: #c62828;
--tm-control-height: 44px;
--tm-control-height-lg: 52px;
--tm-control-padding: 18px;
--tm-font-control: .9375rem;
--tm-font-control-small: .875rem;
--tm-shadow-control: 0 4px 12px rgba(31, 24, 48, .12);
--tm-shadow-bar: 0 10px 30px rgba(31, 24, 48, .08);
--tm-accent: var(--tm-indigo);
--tm-accent-soft: #eeefff;
--tm-accent-strong: #4f46e5;
/* К72 / X30: слой компонентов v0.2 (`components.css`, начало) рисует фокус
через `--focus-ring`. Без объявления кольцо вне `.tm-ui` исчезало целиком.
Сплошное двойное кольцо видно и на светлом, и на цветном фоне. */
--focus-ring: 0 0 0 2px var(--tm-white), 0 0 0 4px var(--tm-accent-strong);
/* О-4 (2026-09-24): одна шкала заголовков на все продукты. h1 экрана — 28 на
телефоне и 32 от 768; h2 раздела — 20; h3 карточки — 16 / 600. */
--tm-font-heading-1: 1.75rem;
--tm-font-heading-2: 1.25rem;
--tm-font-heading-3: 1rem;
}
@media (min-width: 768px) { :root { --tm-font-heading-1: 2rem; } }
[data-accent="purple"] { --tm-accent: var(--tm-purple); --tm-accent-soft: #f7edff; --tm-accent-strong: #9333ea; }
[data-accent="sky"] { --tm-accent: var(--tm-sky); --tm-accent-soft: #e8f7fe; --tm-accent-strong: #0284c7; }
[data-accent="teal"] { --tm-accent: var(--tm-teal); --tm-accent-soft: #e6faf7; --tm-accent-strong: #0f8d80; }
[data-accent="lime"] { --tm-accent: var(--tm-lime); --tm-accent-soft: #f2fadf; --tm-accent-strong: #4d7c0f; }
[data-accent="coral"] { --tm-accent: var(--tm-coral); --tm-accent-soft: #fff0e7; --tm-accent-strong: #ea580c; }
[data-accent="ink"] { --tm-accent: var(--tm-ink); --tm-accent-soft: #eeebf2; --tm-accent-strong: #17121f; }
*, *::before, *::after { box-sizing: border-box; }
html { min-width: 320px; background: var(--tm-canvas); color: var(--tm-ink); font-family: var(--tm-font-sans); }
body { min-height: 100vh; margin: 0; background: var(--tm-canvas); color: var(--tm-ink-soft); font-size: 16px; line-height: 1.55; }
:where(button, input, select, textarea) { font: inherit; }
:where(button, a) { -webkit-tap-highlight-color: transparent; }
:where(a) { color: var(--tm-accent-strong); }
:where(h1, h2, h3, p, dl, ol, ul) { margin-top: 0; }
:where(h1, h2, h3) { color: var(--tm-ink); line-height: 1.12; letter-spacing: -.025em; }
:where(h1) { font-size: var(--tm-font-heading-1); font-weight: 700; }
:where(h2) { font-size: var(--tm-font-heading-2); font-weight: 650; }
:where(h3) { font-size: var(--tm-font-heading-3); font-weight: 600; line-height: 1.35; letter-spacing: 0; }
:where(p) { max-width: 70ch; }
::selection { background: color-mix(in srgb, var(--tm-accent) 24%, transparent); }
.tmc-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; overflow: hidden !important; clip: rect(0 0 0 0) !important; white-space: nowrap !important; clip-path: inset(50%) !important; }
.tmc-muted { color: var(--tm-muted); }
.tmc-icon { display: block; width: 20px; height: 20px; flex: 0 0 auto; object-fit: contain; }
.tmc-icon--large { width: 28px; height: 28px; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}
/* ---------------------------------------------------------------------------
TM Living UI v0.2 component language (imported from main, tm-* selectors).
Placed first so the tmc-* v1.0 layer below keeps precedence on shared
zero-specificity :where() rules.
--------------------------------------------------------------------------- */
/* Framework-neutral materialization of the approved TM component language. */
:where(a, button, input, select, textarea, summary):focus-visible {
outline: 0;
box-shadow: var(--focus-ring);
}
:where(button, input, select, textarea):disabled {
cursor: not-allowed;
opacity: .45;
}
.tm-skip-link {
position: fixed;
z-index: 100;
inset: var(--space-8) auto auto var(--space-8);
padding: var(--space-12) var(--space-16);
border-radius: var(--radius-12);
background: var(--surface-inverse);
color: var(--text-inverse);
transform: translateY(-160%);
}
.tm-skip-link:focus { transform: none; }
.tm-brand-lockup {
display: inline-flex;
align-items: center;
gap: var(--space-12);
color: var(--text-heading);
font-weight: var(--weight-semibold);
text-decoration: none;
}
.tm-brand-lockup__mark {
display: grid;
width: 40px;
height: 40px;
place-items: center;
border-radius: var(--radius-12);
background: var(--tm-ink);
color: var(--tm-n0);
font-size: var(--type-body-sm-size);
letter-spacing: -.03em;
}
.tm-identity-anchor {
display: inline-flex;
align-items: center;
gap: 11px;
padding: 6px 14px 6px 6px;
border: 1px solid var(--border-hairline);
border-radius: var(--radius-pill);
background: var(--surface-card);
color: var(--text-heading);
box-shadow: var(--shadow-soft-1);
}
.tm-identity-anchor__avatar {
display: block;
width: 36px;
height: 36px;
flex: 0 0 auto;
overflow: hidden;
border-radius: 50%;
background: var(--surface-sunken);
}
.tm-identity-anchor__avatar img { width: 100%; height: 100%; object-fit: cover; }
.tm-identity-anchor__body { display: flex; flex-direction: column; align-items: flex-start; line-height: 1.25; }
.tm-identity-anchor__name { font-size: 14px; font-weight: var(--weight-semibold); }
.tm-identity-anchor__role { color: var(--text-muted); font-size: 11.5px; }
.tm-identity-anchor__state { margin-left: 4px; padding: 4px 10px; border-radius: var(--radius-pill); background: var(--accent-soft); color: var(--accent-strong); font-size: 11.5px; font-weight: var(--weight-semibold); white-space: nowrap; }
.tm-context-marker,
.tm-caption {
color: var(--text-muted);
font-size: var(--type-caption-size);
line-height: var(--type-caption-lh);
}
.tm-context-marker {
display: inline-flex;
align-items: center;
gap: var(--space-8);
letter-spacing: .06em;
}
.tm-button {
display: inline-flex;
min-height: 42px;
align-items: center;
justify-content: center;
gap: var(--space-8);
padding: 11px 18px;
border: 1px solid transparent;
border-radius: var(--radius-12);
cursor: pointer;
font-size: var(--type-button-size);
font-weight: var(--type-button-weight);
line-height: var(--type-button-lh);
text-align: center;
text-decoration: none;
transition: background var(--dur-fast) var(--ease-standard), transform var(--dur-instant) var(--ease-standard), box-shadow var(--dur-fast) var(--ease-standard);
}
.tm-button--primary { background: var(--accent); color: var(--accent-on); }
.tm-button--secondary { border-color: var(--accent-mid); background: var(--surface-card); color: var(--accent-strong); }
.tm-button--ghost { border-color: var(--border-hairline); background: transparent; color: var(--text-muted); }
.tm-button--dark { background: var(--surface-inverse); color: var(--text-inverse); }
.tm-button--lime { background: var(--accent-signal); color: var(--tm-ink); }
.tm-button--danger { background: var(--sem-error); color: var(--tm-n0); }
.tm-button--block { width: 100%; }
.tm-button:active:not(:disabled) { transform: scale(var(--press-scale)); }
@media (hover: hover) {
.tm-button--primary:hover:not(:disabled) { background: var(--accent-strong); color: var(--accent-on); box-shadow: 0 8px 28px var(--accent-glow); }
.tm-button--secondary:hover:not(:disabled),
.tm-button--ghost:hover:not(:disabled) { background: var(--accent-soft); color: var(--accent-strong); }
}
.tm-card {
min-width: 0;
padding: var(--pad-card);
border: var(--card-border);
border-radius: var(--card-radius);
background: var(--surface-card);
box-shadow: var(--card-shadow);
}
.tm-card--accent { border-color: transparent; background: var(--accent-action); color: var(--accent-on); box-shadow: var(--shadow-glow); }
.tm-card--accent :where(h1, h2, h3) { color: inherit; }
.tm-card--soft { border-color: transparent; background: var(--surface-accent-soft); box-shadow: none; }
.tm-card--dark { border-color: transparent; background: var(--surface-inverse); color: var(--tm-n100); box-shadow: none; }
.tm-card--dark :where(h1, h2, h3) { color: var(--tm-n0); }
.tm-card--flat { box-shadow: none; }
@media (hover: hover) {
.tm-card--interactive { transition: transform var(--dur-base) var(--ease-standard), box-shadow var(--dur-base) var(--ease-standard); }
.tm-card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-elevated); }
}
.tm-field { display: grid; gap: var(--space-8); }
.tm-field > label { color: var(--text-heading); font-size: var(--type-body-sm-size); font-weight: var(--weight-semibold); }
.tm-field :where(input, select, textarea),
.tm-input {
width: 100%;
min-height: 44px;
padding: 10px var(--space-12);
border: 1px solid var(--border-strong);
border-radius: var(--radius-input);
background: var(--surface-card);
color: var(--text-body);
font: inherit;
}
.tm-field :where(input, select, textarea)::placeholder { color: var(--text-muted); }
.tm-actions { display: flex; flex-wrap: wrap; gap: var(--space-8); align-items: center; }
.tm-actions--stacked { align-items: stretch; flex-direction: column; }
.tm-status {
display: grid;
gap: var(--space-4);
padding: var(--space-12) var(--space-16);
border-left: 3px solid var(--sem-info);
border-radius: var(--radius-8);
background: var(--sem-info-soft);
color: var(--sem-info-ink);
}
.tm-status--success { border-color: var(--sem-success); background: var(--sem-success-soft); color: var(--sem-success-ink); }
.tm-status--info { border-color: var(--sem-info); background: var(--sem-info-soft); color: var(--sem-info-ink); }
.tm-status--warning { border-color: var(--sem-warning); background: var(--sem-warning-soft); color: var(--sem-warning-ink); }
.tm-status--error { border-color: var(--sem-error); background: var(--sem-error-soft); color: var(--sem-error-ink); }
.tm-status--unknown { border: var(--sem-unknown-border); background: var(--sem-unknown-soft); color: var(--sem-unknown-ink); }
.tm-epistemic-tag {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 4px 10px;
border: 1px solid transparent;
border-radius: var(--radius-pill);
font-size: 11.5px;
font-weight: var(--weight-semibold);
line-height: 16px;
white-space: nowrap;
}
.tm-epistemic-tag--fact { background: var(--epi-fact-soft); color: var(--epi-fact); }
.tm-epistemic-tag--observation { background: var(--epi-observation-soft); color: var(--epi-observation); }
.tm-epistemic-tag--assumption { background: var(--epi-assumption-soft); color: var(--epi-assumption); }
.tm-epistemic-tag--unknown { border-style: dashed; border-color: var(--tm-n400); background: var(--epi-unknown-soft); color: var(--epi-unknown); }
.tm-epistemic-tag--conflict { background: var(--epi-conflict-soft); color: var(--epi-conflict); }
.tm-section-header { display: flex; align-items: end; justify-content: space-between; gap: var(--space-16); }
.tm-section-header a { font-size: var(--type-body-sm-size); font-weight: var(--weight-medium); }
.tm-dialog {
width: min(34rem, calc(100% - var(--space-32)));
padding: 0;
border: 1px solid var(--border-hairline);
border-radius: var(--radius-20);
background: var(--surface-raised);
color: var(--text-body);
box-shadow: var(--shadow-elevated);
}
.tm-dialog::backdrop { background: rgba(15,17,21,.62); backdrop-filter: blur(4px); }
.tm-dialog form { display: grid; gap: var(--space-16); padding: var(--space-24); }
.tm-dialog__actions { display: flex; flex-wrap: wrap; gap: var(--space-8); justify-content: flex-end; }
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after { scroll-behavior: auto !important; transition-duration: 0ms !important; }
}
@media (forced-colors: active) {
.tm-card, .tm-dialog, .tm-field :where(input, select, textarea) { border: 1px solid CanvasText; }
}
/* ---------------------------------------------------------------------------
TM Design System v1.0 component language (tmc-* selectors).
--------------------------------------------------------------------------- */
/* UI01/UI02 primitives adapted to the framework-neutral product boundary. */
:where(.tm-ui, .ds01) :where(a, button, input, select, textarea, summary):focus-visible {
outline: 0;
box-shadow: var(--tm-focus);
}
:where(.tm-ui, .ds01) :where(button, input, select, textarea):disabled { cursor: not-allowed; opacity: .46; }
.tmc-skip-link {
position: fixed;
z-index: var(--tm-layer-skip);
inset: var(--tm-space-3) auto auto var(--tm-space-3);
padding: 10px 16px;
border-radius: var(--tm-radius-sm);
background: var(--tm-inverse);
color: var(--tm-white);
transform: translateY(-180%);
}
.tmc-skip-link:focus { transform: none; }
.tmc-brand {
display: inline-flex;
align-items: center;
gap: var(--tm-space-3);
color: var(--tm-ink);
font-weight: 720;
text-decoration: none;
}
.tmc-brand__mark {
display: grid;
width: 42px;
height: 42px;
place-items: center;
border-radius: 13px;
background: linear-gradient(145deg, var(--tm-indigo), var(--tm-purple));
color: var(--tm-white);
box-shadow: 0 10px 25px rgba(99, 102, 241, .24);
font-size: 13px;
letter-spacing: -.04em;
}
.tmc-brand__image {
display: block;
width: 42px;
height: 42px;
object-fit: contain;
filter: drop-shadow(0 8px 14px rgba(15, 94, 205, .2));
}
.tmc-eyebrow, .tmc-caption { color: var(--tm-muted); font-size: 12px; line-height: 1.45; }
.tmc-eyebrow { display: inline-flex; align-items: center; gap: 8px; letter-spacing: .075em; text-transform: uppercase; }
.tmc-eyebrow::before { width: 7px; height: 7px; border-radius: 50%; background: var(--tm-accent); content: ""; }
/* DEC-52 · buttons: start */
/* Кнопки — капсулы, вариант 2 (владелец 2026-09-24). Эталон:
engineering/governance/execution/design-references/buttons-2026-09-24.html,
секция «Вариант 2»; правила — UI-DESIGN-RULES.md §4а, §5.
Тень варианта живёт в `--tmc-button-shadow`: фокус складывает её с
`--tm-focus` и потому никогда не перекрывается тенью (К71).
Старые имена работают: --secondary = тональная, --ghost = спокойная,
кнопка без варианта = тональная (V7). */
.tmc-button {
--tmc-button-shadow: 0 0 0 0 transparent;
position: relative;
display: inline-flex;
min-height: var(--tm-control-height);
align-items: center;
justify-content: center;
gap: var(--tm-space-2);
padding: var(--tm-space-2) var(--tm-control-padding);
border: 0;
border-radius: var(--tm-radius-pill);
box-shadow: var(--tmc-button-shadow);
cursor: pointer;
font-size: var(--tm-font-control);
font-weight: 600;
line-height: 1.2;
text-align: center;
text-decoration: none;
hyphens: manual;
transition: background-color var(--tm-duration-fast) ease, box-shadow var(--tm-duration-fast) ease, color var(--tm-duration-fast) ease, transform var(--tm-duration-fast) ease;
}
.tmc-button > :is(.tmc-glyph, .tmc-icon), .tmc-icon-button > :is(.tmc-glyph, .tmc-icon) { width: 20px; height: 20px; flex: none; }
.tmc-glyph { display: block; width: 20px; height: 20px; flex: none; }
/* Главная: градиент акцента и мягкая цветная тень. */
.tmc-button--primary {
--tmc-button-shadow: inset 0 1px 0 color-mix(in srgb, var(--tm-white) 25%, transparent), 0 6px 16px -6px color-mix(in srgb, var(--tm-accent-strong) 55%, transparent);
background: linear-gradient(180deg, color-mix(in srgb, var(--tm-accent) 94%, var(--tm-white)) 0%, var(--tm-accent-strong) 100%);
color: var(--tm-white);
}
.tmc-button--primary:is(:disabled, [aria-disabled="true"]) {
--tmc-button-shadow: 0 0 0 0 transparent;
background: color-mix(in srgb, var(--tm-accent) 36%, var(--tm-white));
color: var(--tm-white);
opacity: 1;
}
/* Второстепенная — тональная. Кнопка без варианта — тоже она (V7), с нулевой
специфичностью: любое правило продукта её перекрывает. */
.tmc-button--secondary, .tmc-button--tonal { background: var(--tm-accent-soft); color: var(--tm-accent-strong); }
:where(.tmc-button:not(.tmc-button--primary, .tmc-button--secondary, .tmc-button--tonal, .tmc-button--quiet, .tmc-button--outline, .tmc-button--ghost, .tmc-button--nav, .tmc-button--icon, .tmc-button--danger)) { background: var(--tm-accent-soft); color: var(--tm-accent-strong); }
/* Спокойная: белая, мягкая рамка 1,5 px внутрь. `--ghost` — старое имя. */
.tmc-button--quiet, .tmc-button--outline, .tmc-button--ghost {
--tmc-button-shadow: inset 0 0 0 1.5px var(--tm-line-strong);
background: var(--tm-panel);
color: var(--tm-ink);
}
/* Переход в шапке и панелях: значок + подпись, прозрачная; текущий — тональный. */
.tmc-button--nav { padding-inline: var(--tm-space-3); background: transparent; color: var(--tm-ink-soft); }
.tmc-button--nav:is([aria-current]:not([aria-current="false"]), [aria-pressed="true"], .tmc-button--current) { background: var(--tm-accent-soft); color: var(--tm-accent-strong); }
/* Кнопка-значок 44×44, круглая. `.tmc-icon-button` — прежнее имя. */
.tmc-button--icon, .tmc-icon-button {
--tmc-button-shadow: 0 0 0 0 transparent;
position: relative;
display: inline-grid;
width: var(--tm-control-height);
min-width: var(--tm-control-height);
height: var(--tm-control-height);
min-height: var(--tm-control-height);
padding: 0;
place-items: center;
border: 0;
border-radius: var(--tm-radius-pill);
background: transparent;
box-shadow: var(--tmc-button-shadow);
color: var(--tm-ink-soft);
cursor: pointer;
transition: background-color var(--tm-duration-fast) ease, box-shadow var(--tm-duration-fast) ease, color var(--tm-duration-fast) ease, transform var(--tm-duration-fast) ease;
}
/* Поверх фото: белая полупрозрачная с тенью. */
.tmc-button--over-photo, .tmc-icon-button--over-photo {
--tmc-button-shadow: var(--tm-shadow-control);
background: color-mix(in srgb, var(--tm-white) 92%, transparent);
color: var(--tm-ink);
}
/* Опасная — тональная красная. */
.tmc-button--danger { background: var(--tm-red-soft); color: var(--tm-red-strong); }
.tmc-button--lg { min-height: var(--tm-control-height-lg); padding-inline: var(--tm-space-6); font-size: var(--tm-font-body); }
.tmc-button--block { width: 100%; }
.tmc-button:is(:disabled, [aria-disabled="true"]), .tmc-icon-button:is(:disabled, [aria-disabled="true"]) { cursor: not-allowed; }
.tmc-button[aria-disabled="true"]:not(.tmc-button--primary), .tmc-icon-button[aria-disabled="true"] { opacity: .45; }
.tmc-button[aria-busy="true"]::before { width: 16px; height: 16px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: tmc-spin .8s linear infinite; content: ""; }
@keyframes tmc-spin { to { transform: rotate(1turn); } }
/* Счётчик — кружок на значке (корзина, заказы). */
.tmc-count {
position: absolute;
top: var(--tm-space-1);
right: 2px;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--tm-radius-pill);
background: var(--tm-accent-strong);
color: var(--tm-white);
font-size: var(--tm-font-caption);
font-weight: 700;
line-height: 18px;
text-align: center;
pointer-events: none;
}
@media (hover: hover) {
.tmc-button--primary:hover:not(:disabled, [aria-disabled="true"]) { --tmc-button-shadow: inset 0 1px 0 color-mix(in srgb, var(--tm-white) 25%, transparent), 0 10px 22px -8px color-mix(in srgb, var(--tm-accent-strong) 65%, transparent); }
.tmc-button--secondary:hover:not(:disabled, [aria-disabled="true"]), .tmc-button--tonal:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--tm-accent) 9%, var(--tm-accent-soft)); }
:where(.tmc-button:not(.tmc-button--primary, .tmc-button--secondary, .tmc-button--tonal, .tmc-button--quiet, .tmc-button--outline, .tmc-button--ghost, .tmc-button--nav, .tmc-button--icon, .tmc-button--danger)):hover { background: color-mix(in srgb, var(--tm-accent) 9%, var(--tm-accent-soft)); }
.tmc-button--quiet:hover:not(:disabled, [aria-disabled="true"]), .tmc-button--outline:hover:not(:disabled, [aria-disabled="true"]), .tmc-button--ghost:hover:not(:disabled, [aria-disabled="true"]) { --tmc-button-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--tm-muted) 27%, var(--tm-line-strong)); background: var(--tm-panel-soft); }
.tmc-button--nav:not([aria-current]:not([aria-current="false"]), [aria-pressed="true"], .tmc-button--current):hover, .tmc-button--icon:not(.tmc-button--over-photo):hover, .tmc-icon-button:not(.tmc-icon-button--over-photo):hover { background: var(--tm-panel-soft); color: var(--tm-ink); }
.tmc-button--over-photo:hover, .tmc-icon-button--over-photo:hover { background: var(--tm-panel); }
.tmc-button--danger:hover:not(:disabled, [aria-disabled="true"]) { background: color-mix(in srgb, var(--tm-red) 8%, var(--tm-red-soft)); }
}
/* Фокус с клавиатуры виден у каждого варианта: кольцо `--tm-focus` поверх
тени варианта и сплошной контур (контраст ≥ 3:1, §5). */
.tmc-button:focus-visible, .tmc-icon-button:focus-visible, .tmc-bottom-nav__item:focus-visible {
outline: 2px solid var(--tm-accent-strong);
outline-offset: 2px;
box-shadow: var(--tm-focus), var(--tmc-button-shadow);
}
/* Подъём и сжатие — только если человек не просил убрать движение. */
@media (prefers-reduced-motion: no-preference) {
@media (hover: hover) {
.tmc-button--primary:hover:not(:disabled, [aria-disabled="true"]) { transform: translateY(-1px); }
}
.tmc-button:active:not(:disabled, [aria-disabled="true"]), .tmc-icon-button:active:not(:disabled, [aria-disabled="true"]), .tmc-bottom-nav__item:active { transform: scale(.98); }
}
/* Поиск: поле-капсула с лупой внутри и кнопкой «Найти» внутри поля. */
.tmc-search-field {
display: flex;
width: min(440px, 100%);
min-width: 0;
min-height: 48px;
align-items: center;
gap: 6px;
padding: 0 6px 0 var(--tm-space-4);
border: 0;
border-radius: var(--tm-radius-pill);
background: var(--tm-panel);
box-shadow: inset 0 0 0 1.5px var(--tm-line-strong);
transition: box-shadow var(--tm-duration-fast) ease;
}
.tmc-search-field > :is(.tmc-glyph, .tmc-icon) { width: 20px; height: 20px; flex: none; color: var(--tm-muted); }
.tmc-search-field input { width: 100%; flex: 1 1 0%; min-width: 0; min-height: var(--tm-control-height); border: 0; outline: 0; background: transparent; color: var(--tm-ink); font-size: var(--tm-font-body); }
.tmc-search-field input::placeholder { color: var(--tm-muted); }
.tmc-search-field input:focus-visible { box-shadow: none; }
.tmc-search-field:focus-within { box-shadow: inset 0 0 0 1.5px var(--tm-accent), var(--tm-focus); }
.tmc-search-field:has(input:disabled) { background: var(--tm-panel-soft); color: var(--tm-muted); }
/* Кнопка внутри поля видимо ниже поля (36 px), цель касания — 44 px. */
.tmc-search-field .tmc-button { min-height: 36px; padding: 0 var(--tm-space-4); font-size: var(--tm-font-control-small); }
.tmc-search-field .tmc-button::after { position: absolute; inset: -4px 0; content: ""; }
/* Нижняя панель разделов на телефоне: значок над подписью. */
.tmc-bottom-nav {
display: flex;
justify-content: space-around;
gap: var(--tm-space-1);
padding: var(--tm-space-1);
border-radius: var(--tm-radius-md);
background: var(--tm-panel);
box-shadow: inset 0 -1px 0 var(--tm-line), var(--tm-shadow-bar);
}
.tmc-bottom-nav--fixed { position: fixed; z-index: var(--tm-layer-sticky); right: var(--tm-space-2); bottom: calc(var(--tm-space-2) + env(safe-area-inset-bottom, 0px)); left: var(--tm-space-2); }
.tmc-bottom-nav__item {
--tmc-button-shadow: 0 0 0 0 transparent;
position: relative;
display: flex;
min-width: var(--tm-control-height);
min-height: var(--tm-control-height-lg);
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: 0 10px;
border-radius: var(--tm-radius-pill);
color: var(--tm-ink-soft);
font-size: var(--tm-font-caption);
font-weight: 600;
line-height: 1.2;
text-decoration: none;
transition: background-color var(--tm-duration-fast) ease, color var(--tm-duration-fast) ease, transform var(--tm-duration-fast) ease;
}
.tmc-bottom-nav__item > :is(.tmc-glyph, .tmc-icon) { width: 22px; height: 22px; }
.tmc-bottom-nav__item[aria-current]:not([aria-current="false"]) { background: var(--tm-accent-soft); color: var(--tm-accent-strong); }
@media (hover: hover) {
.tmc-bottom-nav__item:not([aria-current]:not([aria-current="false"])):hover { background: var(--tm-panel-soft); color: var(--tm-ink); }
}
@media (forced-colors: active) {
.tmc-button, .tmc-icon-button, .tmc-search-field { border: 1px solid ButtonText; }
}
/* DEC-52 · buttons: end */
/* О-7 (2026-09-24): раскрытие, группа полей, флажки и радио — один вид во всех
продуктах, без системных треугольника, врезанной легенды и синих радио.
Нулевая специфичность: раскладка экрана может переопределить. */
:where(details) > :where(summary) {
display: flex;
min-height: var(--tm-control-height);
align-items: center;
gap: var(--tm-space-2);
cursor: pointer;
list-style: none;
}
:where(details) > :where(summary)::-webkit-details-marker { display: none; }
/* Шеврон 20 px в конце строки: вниз — свёрнуто, вверх — раскрыто. */
:where(details) > :where(summary)::after {
width: 8px;
height: 8px;
flex: none;
margin-inline: auto 6px;
border-right: 2px solid currentColor;
border-bottom: 2px solid currentColor;
content: "";
transform: translateY(-2px) rotate(45deg);
transition: transform var(--tm-duration-fast) ease;
}
:where(details[open]) > :where(summary)::after { transform: translateY(2px) rotate(225deg); }
:where(fieldset) { min-width: 0; margin: 0; padding: 0; border: 0; }
:where(legend) { margin-bottom: var(--tm-space-2); padding: 0; color: var(--tm-ink); font-size: var(--tm-font-control-small); font-weight: 600; }
:where(input[type="checkbox"], input[type="radio"]) { width: 20px; height: 20px; margin: 0; flex: none; accent-color: var(--tm-accent-strong); cursor: pointer; }
/* Флажок и радио нажимаются вместе с подписью: цель — строка 44 px. */
:where(label:has(> input[type="checkbox"], > input[type="radio"])) { display: flex; min-height: var(--tm-control-height); align-items: center; gap: var(--tm-space-3); cursor: pointer; }
.tmc-card {
min-width: 0;
padding: clamp(20px, 3vw, 30px);
border: 1px solid var(--tm-line);
border-radius: var(--tm-radius-lg);
background: var(--tm-panel);
box-shadow: var(--tm-shadow-card);
}
.tmc-card--soft { border-color: transparent; background: var(--tm-accent-soft); box-shadow: none; }
.tmc-card--dark { border-color: transparent; background: var(--tm-inverse); color: #dcd6e7; box-shadow: none; }
.tmc-card--dark :where(h1, h2, h3, dt, dd) { color: var(--tm-white); }
.tmc-card--flat { box-shadow: none; }
.tmc-card--interactive { transition: transform 180ms ease, box-shadow 180ms ease; }
@media (hover: hover) { .tmc-card--interactive:hover { transform: translateY(-3px); box-shadow: var(--tm-shadow-float); } }
.tmc-field { display: grid; gap: 8px; }
.tmc-field-row { display: flex; flex-wrap: wrap; align-items: end; gap: var(--tm-space-3); }
.tmc-field-row > .tmc-field { flex: 1 1 16rem; min-width: 0; }
.tmc-field-row > .tmc-button { flex: 0 1 auto; max-width: 100%; }
@media (max-width: 540px) {
.tmc-field-row > .tmc-field, .tmc-field-row > .tmc-button { flex-basis: 100%; }
}
.tmc-field > label { color: var(--tm-ink); font-size: 14px; font-weight: 640; }
.tmc-field :where(input, select, textarea), .tmc-input {
width: 100%; min-height: 46px; padding: 10px 14px; border: 1px solid var(--tm-line-strong);
border-radius: 12px; background: var(--tm-panel); color: var(--tm-ink);
}
.tmc-field :where(input, select, textarea)::placeholder { color: var(--tm-muted); }
.tmc-field[data-state="error"] :where(input, select, textarea) { border-color: var(--tm-red); }
.tmc-field__hint { color: var(--tm-muted); font-size: var(--tm-font-caption); }
.tmc-field__error { color: #991b1b; font-size: var(--tm-font-caption); }
.tmc-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.tmc-actions--stacked { align-items: stretch; flex-direction: column; }
.tmc-chip, .tmc-segmented__item, .tmc-tab { display: inline-flex; min-height: 40px; align-items: center; justify-content: center; gap: 7px; padding: 7px 13px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-pill); background: var(--tm-panel); color: var(--tm-muted); text-decoration: none; }
.tmc-chip[aria-pressed="true"], .tmc-segmented__item[aria-checked="true"], .tmc-tab[aria-selected="true"] { border-color: color-mix(in srgb, var(--tm-accent) 35%, var(--tm-line)); background: var(--tm-accent-soft); color: var(--tm-accent-strong); }
.tmc-segmented, .tmc-tab-bar { display: flex; max-width: 100%; gap: 6px; overflow-x: auto; }
.tmc-breadcrumbs ol { display: flex; flex-wrap: wrap; gap: 8px; margin: 0; padding: 0; list-style: none; }
.tmc-breadcrumbs li + li::before { margin-right: 8px; color: var(--tm-muted); content: "/"; }
.tmc-context-panel { padding: clamp(20px, 3vw, 30px); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg); background: linear-gradient(145deg, var(--tm-accent-soft), var(--tm-panel)); }
.tmc-progress-ring { --tmc-progress: 0; display: grid; width: 88px; aspect-ratio: 1; place-items: center; border-radius: 50%; background: radial-gradient(closest-side, var(--tm-panel) 72%, transparent 73% 99%), conic-gradient(var(--tm-accent) calc(var(--tmc-progress) * 1%), var(--tm-line) 0); }
.tmc-progress { width: 100%; height: 9px; overflow: hidden; border-radius: var(--tm-radius-pill); background: var(--tm-line); }
.tmc-progress > span { display: block; width: var(--tmc-progress, 0%); height: 100%; border-radius: inherit; background: var(--tm-accent); }
.tmc-comparison { display: grid; gap: 10px; }
.tmc-comparison__row { display: grid; grid-template-columns: minmax(100px,.6fr) minmax(0,1.4fr) auto; align-items: center; gap: 10px; }
.tmc-balance { display: inline-flex; align-items: center; gap: 8px; color: var(--tm-ink); font-weight: 650; }
.tmc-mini-bars { display: flex; height: 42px; align-items: end; gap: 3px; }
.tmc-mini-bars > span { width: 6px; min-height: 4px; border-radius: 3px 3px 0 0; background: var(--tm-accent); }
.tmc-sparkline { width: 100%; height: 40px; color: var(--tm-accent); }
.tmc-activity-row, .tmc-signal-row, .tmc-timeline-item, .tmc-checklist-item { display: grid; grid-template-columns: auto minmax(0,1fr) auto; align-items: start; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--tm-line); }
.tmc-activity-row:last-child, .tmc-signal-row:last-child, .tmc-timeline-item:last-child, .tmc-checklist-item:last-child { border-bottom: 0; }
.tmc-row-marker { width: 10px; height: 10px; margin-top: 7px; border: 2px solid var(--tm-accent); border-radius: 50%; }
.tmc-notice { display: grid; grid-template-columns: auto minmax(0,1fr); gap: 12px; padding: 16px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); background: var(--tm-panel); }
.tmc-notice[data-state="success"] { border-color: color-mix(in srgb, var(--tm-teal) 35%, var(--tm-line)); background: #effcf9; }
.tmc-notice[data-state="warning"] { border-color: color-mix(in srgb, var(--tm-yellow) 45%, var(--tm-line)); background: #fffced; }
.tmc-notice[data-state="error"] { border-color: color-mix(in srgb, var(--tm-red) 35%, var(--tm-line)); background: #fff5f5; }
.tmc-notice[data-state="unknown"] { border-style: dashed; background: var(--tm-panel-soft); }
.tmc-skeleton { min-height: 1em; border-radius: 6px; background: linear-gradient(90deg, var(--tm-panel-soft), var(--tm-line), var(--tm-panel-soft)); background-size: 200% 100%; animation: tmc-skeleton 1.4s ease infinite; }
@keyframes tmc-skeleton { to { background-position: -200% 0; } }
/* UI-DESIGN-RULES п. 6а «Ничего не прыгает». Заготовка того же размера, что будущее
содержимое: строки текста, заголовок, блок, фото с постоянными пропорциями.
Обёртка заготовки — aria-hidden; о загрузке сообщает строка состояния. */
.tmc-skeleton { display: block; }
.tmc-skeleton--line { height: 1em; margin-block: .3em; }
.tmc-skeleton--line.tmc-skeleton--short { width: 45%; }
.tmc-skeleton--line.tmc-skeleton--medium { width: 70%; }
.tmc-skeleton--title { width: 60%; height: 1.4em; margin-block: .2em .6em; }
.tmc-skeleton--media { width: 100%; aspect-ratio: 1; border-radius: var(--tm-radius-md); }
.tmc-skeleton--action { width: 100%; min-height: 44px; border-radius: var(--tm-radius-sm); }
.tmc-skeleton-card { display: grid; align-content: start; gap: var(--tm-space-2); padding: var(--tm-space-4); border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); background: var(--tm-panel); }
.tmc-skeleton-stack { display: grid; gap: var(--tm-space-3); }
/* Блоки после основного содержимого (подвал, боковые панели, ссылки под списком)
ждут, пока содержимое придёт: иначе они прыгают вниз, когда оно встаёт на место. */
[data-tm-content-state="loading"] .tmc-after-content { display: none !important; }
.tmc-empty { display: grid; min-height: 180px; place-content: center; gap: 8px; padding: 24px; text-align: center; }
.tmc-popover { z-index: var(--tm-layer-popover); padding: 12px; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-md); background: var(--tm-panel); box-shadow: var(--tm-shadow-float); }
.tmc-toast-stack { position: fixed; z-index: var(--tm-layer-toast); right: 16px; bottom: 16px; display: grid; width: min(360px, calc(100% - 32px)); gap: 8px; }
.tmc-drawer { position: fixed; z-index: var(--tm-layer-dialog); inset: 0 0 0 auto; width: min(430px, 100%); padding: 24px; overflow: auto; border: 0; background: var(--tm-panel); box-shadow: var(--tm-shadow-dialog); }
.tmc-status { display: grid; gap: 4px; padding: 13px 16px; border-left: 3px solid var(--tm-sky); border-radius: 10px; background: #e8f7fe; color: #075985; }
.tmc-status--success { border-color: var(--tm-teal); background: #e6faf7; color: #0f766e; }
.tmc-status--warning { border-color: var(--tm-yellow); background: #fef9dc; color: #854d0e; }
.tmc-status--error { border-color: var(--tm-red); background: #fff0f0; color: #991b1b; }
.tmc-status--unknown { border: 1px dashed var(--tm-line-strong); background: var(--tm-panel-soft); color: var(--tm-muted); }
.tmc-dialog {
z-index: var(--tm-layer-dialog); width: min(36rem, calc(100% - 32px)); padding: 0; border: 1px solid var(--tm-line); border-radius: var(--tm-radius-lg);
background: var(--tm-panel); color: var(--tm-ink-soft); box-shadow: var(--tm-shadow-float);
}
.tmc-dialog::backdrop { background: rgba(31, 24, 48, .6); backdrop-filter: blur(5px); }
.tmc-dialog form { display: grid; gap: 16px; padding: 26px; }
.tmc-dialog__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; }
@media (forced-colors: active) {
.tmc-card, .tmc-dialog, .tmc-field :where(input, select, textarea) { border: 1px solid CanvasText; }
}
/* Одна навигация ТМ (владелец 2026-09-24): «Меню» в строке шапки и лист
«Разделы ТМ» — один вид в Маркете, Бизнесе, Центральном, «Моём» и
приглашениях. «Меню» — переход шапки (`tmc-button--nav`), всегда в потоке
строки шапки и никогда поверх содержимого (UI-DESIGN-RULES §4). Кнопка
закрытия — кнопка-значок 44×44, круглая (§4а). Текущий раздел — тональный,
«Выйти» — спокойная. Правила листа начинаются с `.tm-mobile-navigation`,
чтобы общие правила кнопок поверхности (`.market-surface button`) их не
перекрывали. */
.tm-mobile-navigation__trigger { display: none; flex: none; }
.tm-mobile-navigation__trigger > .tmc-glyph { width: 22px; height: 22px; }
@media (max-width: 720px) { .tm-mobile-navigation__trigger { display: inline-flex; } }
.tmc-section-header { display: flex; min-height: calc(var(--tm-control-height) + var(--tm-space-4)); align-items: center; justify-content: space-between; gap: var(--tm-space-3); }
.tmc-section-header__home { display: inline-flex; min-width: 0; min-height: var(--tm-control-height); align-items: center; gap: var(--tm-space-2); color: var(--tm-ink); font-size: var(--tm-font-body); font-weight: 700; line-height: 1.2; text-decoration: none; }
.tmc-section-header__home strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tmc-section-header__mark { width: 32px; height: 32px; flex: none; object-fit: contain; }
.tmc-section-header .tm-mobile-navigation__trigger { display: inline-flex; }
.tm-mobile-navigation { z-index: var(--tm-layer-dialog); width: min(380px, calc(100% - 2 * var(--tm-space-3))); max-height: calc(100dvh - 2 * var(--tm-space-3)); padding: 0; overflow: auto; border: 0; border-radius: var(--tm-radius-lg); background: var(--tm-panel); color: var(--tm-ink); box-shadow: var(--tm-shadow-dialog); }
.tm-mobile-navigation:not([open]) { display: none; }
.tm-mobile-navigation[open] { display: block; }
.tm-mobile-navigation::backdrop { background: color-mix(in srgb, var(--tm-inverse) 58%, transparent); }
.tm-mobile-navigation .tm-mobile-navigation__panel { display: grid; gap: var(--tm-space-3); padding: var(--tm-space-4); }
.tm-mobile-navigation .tm-mobile-navigation__panel > header { display: flex; align-items: center; justify-content: space-between; gap: var(--tm-space-3); }
.tm-mobile-navigation .tm-mobile-navigation__brand { display: flex; align-items: center; gap: var(--tm-space-2); font-size: var(--tm-font-body); }
.tm-mobile-navigation .tm-mobile-navigation__brand img { width: 32px; height: 32px; object-fit: contain; }
.tm-mobile-navigation .tm-mobile-navigation__close { width: var(--tm-control-height); min-width: var(--tm-control-height); height: var(--tm-control-height); min-height: var(--tm-control-height); padding: 0; border: 0; border-radius: var(--tm-radius-pill); background: var(--tm-panel-soft); box-shadow: none; color: var(--tm-ink); }
.tm-mobile-navigation nav { display: grid; gap: 2px; }
.tm-mobile-navigation .tm-mobile-navigation__link, .tm-mobile-navigation .tm-mobile-navigation__logout { display: flex; width: 100%; min-height: var(--tm-control-height); align-items: center; gap: var(--tm-space-3); padding: var(--tm-space-2) var(--tm-space-3); border: 0; border-radius: var(--tm-radius-pill); background: transparent; box-shadow: none; color: var(--tm-ink); font: inherit; font-size: var(--tm-font-control); font-weight: 500; line-height: 1.25; text-align: left; text-decoration: none; cursor: pointer; }
.tm-mobile-navigation .tm-mobile-navigation__link .tmc-icon, .tm-mobile-navigation .tm-mobile-navigation__logout .tmc-icon { width: 24px; height: 24px; flex: 0 0 24px; }
.tm-mobile-navigation .tm-mobile-navigation__link[aria-current="page"] { background: var(--tm-accent-soft); color: var(--tm-accent-strong); font-weight: 650; }
.tm-mobile-navigation form[data-tm-mobile-logout-form] { display: block; max-width: none; margin: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; }
.tm-mobile-navigation .tm-mobile-navigation__logout { justify-content: center; margin-top: var(--tm-space-1); box-shadow: inset 0 0 0 1.5px var(--tm-line-strong); font-weight: 600; }
.tm-mobile-navigation .tm-mobile-navigation__logout:disabled { cursor: wait; opacity: .65; }
.tm-mobile-navigation [data-tm-mobile-logout-status] { margin: var(--tm-space-2) 0 0; color: var(--tm-red-strong); font-size: var(--tm-font-caption); line-height: 1.45; }
@media (hover: hover) {
.tm-mobile-navigation .tm-mobile-navigation__link:not([aria-current="page"]):hover, .tm-mobile-navigation .tm-mobile-navigation__logout:hover, .tm-mobile-navigation .tm-mobile-navigation__close:hover { background: var(--tm-panel-soft); color: var(--tm-ink); }
.tm-mobile-navigation .tm-mobile-navigation__close:hover { background: var(--tm-line); }
}
.tm-mobile-navigation :where(a, button):focus-visible { outline: 2px solid var(--tm-accent-strong); outline-offset: 2px; }
/* Строка шапки, которую оболочка кладёт первой в документ страницы без своей шапки. */
body > .tmc-section-header { width: min(1260px, 100%); margin: 0 auto; padding: var(--tm-space-2) var(--tm-space-4); }
/* Поле времени, 24 часа (владелец 2026-09-24): часы и минуты — два списка
одной строки, цели 44 px; формат не зависит от языка браузера. */
.tmc-time-field { display: grid; min-width: 0; gap: 6px; margin: 0; padding: 0; border: 0; }
.tmc-time-field__label { padding: 0; color: inherit; font-size: var(--tm-font-control-small); font-weight: 550; }
.tmc-time-field__controls { display: flex; align-items: center; gap: var(--tm-space-2); }
.tmc-time-field__part { display: block; flex: 1 1 0; min-width: 0; }
.tmc-time-field select { width: 100%; min-height: var(--tm-control-height); padding: 0 var(--tm-space-3); border: 1px solid var(--tm-line-strong); border-radius: var(--tm-radius-sm); background: var(--tm-panel); color: var(--tm-ink); font: inherit; font-size: var(--tm-font-body); font-variant-numeric: tabular-nums; }
.tmc-time-field select:focus-visible { outline: 2px solid var(--tm-accent-strong); outline-offset: 2px; }
.tmc-time-field__colon { flex: none; color: var(--tm-muted); font-weight: 600; }
/* Поле даты (2026-09-25, дата рождения при регистрации): родной `` берёт
формат из языка браузера («mm/dd/yyyy»), поэтому дата — три списка одной строки: день,
месяц словом, год. Группа — `