/* Основа: сброс, шрифт страницы, полосы прокрутки, мелкие вспомогательные классы. */
*, *::before, *::after { box-sizing: border-box; }

html { font-size: var(--font-size-base); }

body {
  margin: 0;
  min-width: 1280px;
  font-family: var(--font-family);
  font-size: var(--font-size-base);
  font-weight: var(--font-weight-regular);
  line-height: var(--line-height-base);
  color: var(--text-inherit);
  background: var(--background-primary-default);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, p, ul, ol, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
button, input, select, textarea { font: inherit; color: inherit; margin: 0; }
button { background: none; border: 0; padding: 0; cursor: pointer; }
button:disabled { cursor: not-allowed; }
input::placeholder, textarea::placeholder { color: var(--text-placeholder); opacity: 1; }
input[type="search"]::-webkit-search-cancel-button { display: none; }
[hidden] { display: none !important; }
:focus { outline: none; }

/* Полосы прокрутки по умолчанию: видимая толщина 5 px за счёт белой рамки бегунка */
::-webkit-scrollbar { width: 11px; height: 11px; }
::-webkit-scrollbar-track { background: transparent; margin: 8px 0; }
::-webkit-scrollbar-thumb {
  background: var(--grey-200);
  border: 3px solid var(--white);
  border-radius: var(--radius-6);
}
::-webkit-scrollbar-corner { background: transparent; }

/* Прокрутка всей страницы */
html::-webkit-scrollbar { width: 8px; height: 8px; }
html::-webkit-scrollbar-thumb { border: 0; border-radius: var(--radius-10); }

/* Узкие панели (редактор блока) */
.cl-scroll--thin::-webkit-scrollbar { width: 3px; height: 3px; }
.cl-scroll--thin::-webkit-scrollbar-track { margin: 0; }
.cl-scroll--thin::-webkit-scrollbar-thumb { background: var(--grey-500); border: 0; border-radius: var(--radius-6); }

.cl-scroll { overflow: auto; }
.cl-scroll-y { overflow-x: hidden; overflow-y: auto; }

/* Иконка: размер задаётся атрибутами width/height, цвет — текущим цветом текста */
.cl-icon { flex: none; fill: none; stroke: currentColor; stroke-linecap: round; stroke-linejoin: round; }

/* Текстовые помощники */
.cl-ellipsis { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.cl-text-secondary { color: var(--text-secondary); }
.cl-text-caption { color: var(--text-caption); }
.cl-text-brand { color: var(--text-brand); }
.cl-text-danger { color: var(--text-danger); }
.cl-text-medium { font-weight: var(--font-weight-medium); }
.cl-link { color: var(--link-brand-text-default); cursor: pointer; transition: color var(--duration-button); }
.cl-link:hover { color: var(--link-brand-text-hover); }
.cl-nums { font-variant-numeric: tabular-nums; }

/* Мета-строка «ID … · дата» */
.cl-meta { font-size: 14px; line-height: 21px; color: var(--text-caption); }
.cl-meta__sep { color: var(--grey-400); padding: 0 2px; }

/* Раскладочные помощники */
.cl-row-flex { display: flex; align-items: center; gap: var(--control-gap); }
.cl-col-flex { display: flex; flex-direction: column; }
.cl-grow { flex: 1 1 auto; min-width: 0; }
.cl-visually-hidden {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}