/*
 * Справочник REST API Битрикс24.
 *
 * Палитра и размеры взяты у соседнего справочника /api-bitrix/ — это один
 * и тот же тип страницы, и различаться им незачем. Поэтому цвета заданы
 * числами, а не переменными темы: акцент темы (#2196f3) светлее того, что
 * у соседа (#2271b1), и на кнопке поиска разница видна сразу.
 */

.cb24 {
	--cb24-accent: #2271b1;
	--cb24-surface: #fff;
	--cb24-bg: #f4f6f8;
	--cb24-border: #e2e6ea;
	--cb24-text: #1d2327;
	--cb24-muted: #646970;
	--cb24-radius: 10px;

	color: var(--cb24-text);
	font-size: 16px;
	line-height: 1.6;
	padding-block: 1.5rem 3rem;
}

.cb24 code,
.cb24 pre {
	font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, "Liberation Mono", monospace;
}

/* --- Хлебные крошки --- */

.cb24-breadcrumbs__list {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem 0.5rem;
	margin: 0 0 1.25rem;
	padding: 0;
	list-style: none;
	font-size: 0.8125rem;
	color: var(--cb24-muted);
}

.cb24-breadcrumbs__item + .cb24-breadcrumbs__item::before {
	content: "/";
	margin-right: 0.5rem;
	color: var(--cb24-border);
}

.cb24-breadcrumbs__link {
	color: inherit;
	text-decoration: none;
}

.cb24-breadcrumbs__link:hover {
	color: var(--cb24-accent);
}

/* --- Шапки --- */

.cb24-hero {
	margin-bottom: 28px;
}

.cb24-hero__title {
	margin: 0 0 8px;
	font-size: clamp(1.6rem, 4vw, 2.3rem);
	line-height: 1.2;
}

.cb24-page-head {
	margin-bottom: 22px;
}

.cb24-page-head__title {
	margin: 0 0 6px;
	font-size: clamp(1.4rem, 3.5vw, 2rem);
	line-height: 1.2;
	word-break: break-word;
}

.cb24-hero__lead,
.cb24-page-head__lead {
	max-width: 60ch;
	margin: 0 0 18px;
	color: var(--cb24-muted);
}

.cb24__subtitle,
.cb24-section__title {
	margin: 2rem 0 1rem;
	font-size: 1.35rem;
	line-height: 1.3;
}

.cb24-section__subtitle {
	margin: 1.5rem 0 0.75rem;
	font-size: 1.1rem;
}

/* --- Поиск --- */

.cb24-search {
	position: relative;
	max-width: 640px;
}

.cb24-search__box {
	display: flex;
	gap: 8px;
}

.cb24-search__input {
	flex: 1 1 auto;
	min-width: 0;
	padding: 12px 14px;
	border: 2px solid var(--cb24-border);
	border-radius: 8px;
	font-size: 1rem;
}

.cb24-search__input:focus {
	outline: none;
	border-color: var(--cb24-accent);
}

.cb24-search__submit {
	flex: 0 0 auto;
	padding: 0 18px;
	border: 0;
	border-radius: 8px;
	background: var(--cb24-accent);
	color: #fff;
	font-size: 1rem;
	cursor: pointer;
}

.cb24-search__results {
	position: absolute;
	z-index: 30;
	inset-inline: 0;
	top: calc(100% + 6px);
	margin: 0;
	padding: 6px;
	list-style: none;
	background: var(--cb24-surface);
	border: 1px solid var(--cb24-border);
	border-radius: 8px;
	box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
	max-height: 60vh;
	overflow-y: auto;
}

.cb24-search__results a {
	display: block;
	padding: 9px 10px;
	border-radius: 6px;
	text-decoration: none;
	color: inherit;
}

.cb24-search__results a:hover,
.cb24-search__results a:focus {
	background: var(--cb24-bg);
}

.cb24-search__results code {
	font-size: 0.875rem;
	color: var(--cb24-accent);
}

.cb24-search__results span {
	display: block;
	font-size: 0.8125rem;
	color: var(--cb24-muted);
}

.cb24-search__total {
	color: var(--cb24-muted);
}

/* --- Сводка --- */

.cb24-stats {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr));
	gap: 0.75rem;
	margin: 1.5rem 0;
}

.cb24-stat {
	padding: 1rem;
	background: var(--cb24-bg);
	border-radius: var(--cb24-radius);
	text-align: center;
}

.cb24-stat__num {
	display: block;
	font-size: 1.6rem;
	font-weight: 700;
	line-height: 1.1;
}

.cb24-stat__label {
	display: block;
	font-size: 0.8125rem;
	color: var(--cb24-muted);
}

/* --- Карточки разделов --- */

.cb24-modules__grid {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
	gap: 12px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.cb24-module-card {
	display: flex;
	flex-direction: column;
	padding: 14px 16px;
	background: var(--cb24-surface);
	border: 1px solid var(--cb24-border);
	border-radius: 10px;
}

.cb24-module-card__link {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 8px;
	text-decoration: none;
	color: inherit;
}

.cb24-module-card__name {
	font-weight: 600;
	min-width: 0;
}

.cb24-module-card__count {
	flex: 0 0 auto;
	white-space: nowrap;
	padding: 2px 8px;
	border-radius: 20px;
	background: var(--cb24-bg);
	font-size: 0.85rem;
	color: var(--cb24-muted);
}

/* --- Список методов --- */

.cb24-method-list {
	margin: 0;
	padding: 0;
	list-style: none;
	display: grid;
	gap: 0.5rem;
}

.cb24-method-list__item {
	padding: 0.7rem 0.9rem;
	border: 1px solid var(--cb24-border);
	border-radius: var(--cb24-radius);
}

.cb24-method-list__link {
	display: inline-flex;
	align-items: center;
	gap: 0.5rem;
	text-decoration: none;
}

.cb24-method-list__name {
	font-size: 0.95rem;
	color: var(--cb24-accent);
}

.cb24-method-list__summary {
	display: block;
	margin-top: 0.2rem;
	font-size: 0.875rem;
	color: var(--cb24-muted);
}

/* --- Значки --- */

.cb24-badge {
	display: inline-block;
	padding: 0.1rem 0.5rem;
	border-radius: 999px;
	background: var(--cb24-bg);
	font-size: 0.75rem;
	line-height: 1.6;
	color: var(--cb24-muted);
	white-space: nowrap;
}

.cb24-badge--method {
	background: var(--cb24-accent);
	color: #fff;
}

.cb24-badge--deprecated {
	background: #fde8e8;
	color: #9b1c1c;
}

/*
 * У 28 страниц в scope не короткое имя, а пояснение из источника:
 * «placement — регистрация точки встраивания, telephony — доступ к точке
 * встраивания карточки звонка», 97 знаков. С `white-space: nowrap`,
 * который нужен коротким значкам, такая плашка растягивалась на 588 px
 * при 320 доступных и уносила вбок всю страницу.
 */
.cb24-badge--scope {
	white-space: normal;
	min-width: 0;
	max-width: 100%;
}

.cb24-entity__badges {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4rem;
	margin-bottom: 0.6rem;
}

.cb24-entity__title {
	margin: 0 0 0.35rem;
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	line-height: 1.2;
	word-break: break-word;
}

.cb24-entity__subtitle {
	margin: 0 0 1rem;
	color: var(--cb24-muted);
}

/* --- Врезки --- */

.cb24-notice {
	padding: 0.85rem 1rem;
	border-radius: var(--cb24-radius);
	margin: 1rem 0;
}

.cb24-notice--deprecated {
	background: #fef3f2;
	border: 1px solid #fbd5d5;
}

.cb24-actuality {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 16px;
	margin: 14px 0;
	padding: 10px 14px;
	background: var(--cb24-bg);
	border-radius: 8px;
	font-size: 0.82rem;
}

.cb24-actuality__item--muted {
	color: var(--cb24-muted);
}

.cb24-permissions {
	margin: 0.75rem 0;
	font-size: 0.9375rem;
}

.cb24-status {
	margin: 0 0 0.75rem;
	color: var(--cb24-muted);
}

/* --- Параметры --- */

.cb24-params {
	display: grid;
	gap: 0.75rem;
}

.cb24-param {
	padding: 0.85rem 1rem;
	background: var(--cb24-bg);
	border-radius: var(--cb24-radius);
}

/*
 * min-width: 0 у детей grid и flex — не украшение. По умолчанию у них
 * min-width: auto, то есть «не сжиматься меньше содержимого», и вложенный
 * блок кода с `overflow-x: auto` вместо собственной прокрутки растягивает
 * карточку, а за ней и страницу. Ловится только на узком экране и только
 * на тех параметрах, в описании которых есть пример кода.
 */
.cb24-param,
.cb24-param__desc,
.cb24-method-list__item,
.cb24-module-card,
.cb24-stat {
	min-width: 0;
}

.cb24-param__head {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 0.5rem;
	margin-bottom: 0.35rem;
}

.cb24-param__name {
	font-weight: 700;
}

.cb24-param__type {
	font-size: 0.8125rem;
	color: var(--cb24-accent);
}

.cb24-param__req {
	font-size: 0.75rem;
	color: var(--cb24-muted);
}

.cb24-param__req--req {
	color: #9b1c1c;
}

.cb24-param__desc > :first-child {
	margin-top: 0;
}

.cb24-param__desc > :last-child {
	margin-bottom: 0;
}

/* --- Код --- */

.cb24-code-wrap {
	position: relative;
	margin: 0.75rem 0;
}

.cb24-code {
	margin: 0;
	padding: 1rem;
	overflow-x: auto;
	background: #11161d;
	color: #e6edf3;
	border-radius: var(--cb24-radius);
	font-size: 0.8125rem;
	line-height: 1.55;
}

.cb24-code code {
	background: none;
	color: inherit;
	padding: 0;
}

.cb24-copy {
	position: absolute;
	top: 0.5rem;
	right: 0.5rem;
	padding: 0.25rem 0.6rem;
	border: 0;
	border-radius: 6px;
	background: rgba(255, 255, 255, 0.14);
	color: #e6edf3;
	font-size: 0.75rem;
	cursor: pointer;
}

.cb24-copy:hover {
	background: rgba(255, 255, 255, 0.24);
}

/* --- Вкладки примеров --- */

.cb24-tabs__nav {
	display: flex;
	flex-wrap: wrap;
	gap: 0.35rem;
	margin-bottom: 0.5rem;
}

.cb24-tabs__btn {
	padding: 0.35rem 0.8rem;
	border: 1px solid var(--cb24-border);
	border-radius: 999px;
	background: transparent;
	font-size: 0.8125rem;
	cursor: pointer;
}

.cb24-tabs__btn.is-active {
	background: var(--cb24-accent);
	border-color: var(--cb24-accent);
	color: #fff;
}

/* --- Таблица ошибок --- */

.cb24-errors {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.cb24-errors th,
.cb24-errors td {
	padding: 0.6rem 0.75rem;
	border-bottom: 1px solid var(--cb24-border);
	text-align: left;
	vertical-align: top;
}

.cb24-errors th {
	font-size: 0.8125rem;
	color: var(--cb24-muted);
}

/* --- Прочее --- */

.cb24-empty {
	padding: 1rem;
	background: var(--cb24-bg);
	border-radius: var(--cb24-radius);
	color: var(--cb24-muted);
}

.cb24-attribution {
	margin: 30px 0 100px;
	padding: 14px 16px;
	border: 1px dashed var(--cb24-border);
	border-radius: 8px;
	font-size: 0.85rem;
	color: var(--cb24-muted);
}

.cb24-attribution p {
	margin: 0 0 0.4rem;
}

.cb24-attribution p:last-child {
	margin-bottom: 0;
}

.cb24-list {
	padding-left: 1.25rem;
}

@media (max-width: 600px) {
	.cb24-search__box {
		flex-wrap: wrap;
	}

	.cb24-search__submit {
		width: 100%;
	}
}

/* --- Таблицы из описания --- */

.cb24-table-wrap {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	margin: 1rem 0;
}

.cb24-table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.9375rem;
}

.cb24-table th,
.cb24-table td {
	padding: 0.6rem 0.75rem;
	border: 1px solid var(--cb24-border);
	text-align: left;
	vertical-align: top;
}

.cb24-table th {
	background: var(--cb24-bg);
	font-size: 0.8125rem;
	color: var(--cb24-muted);
}

.cb24-table .cb24-code {
	margin: 0.5rem 0;
}

.cb24-table sup {
	color: #9b1c1c;
}

/* --- Подсветка синтаксиса --- */

.cb24-code {
	--cb24-tok-com: #8b949e;
	--cb24-tok-str: #a5d6ff;
	--cb24-tok-num: #79c0ff;
	--cb24-tok-kw: #ff7b72;
	--cb24-tok-type: #ffa657;
	--cb24-tok-fn: #d2a8ff;
	--cb24-tok-flag: #7ee787;
	--cb24-tok-punct: #8b949e;
}

.cb24-tok-com { color: var(--cb24-tok-com); font-style: italic; }
.cb24-tok-str { color: var(--cb24-tok-str); }
.cb24-tok-key { color: var(--cb24-tok-num); }
.cb24-tok-num { color: var(--cb24-tok-num); }
.cb24-tok-kw { color: var(--cb24-tok-kw); }
.cb24-tok-type { color: var(--cb24-tok-type); }
.cb24-tok-fn { color: var(--cb24-tok-fn); }
.cb24-tok-var { color: var(--cb24-tok-type); }
.cb24-tok-flag { color: var(--cb24-tok-flag); }
.cb24-tok-punct { color: var(--cb24-tok-punct); }

/* --- Ссылки раздела --- */

/*
 * Подчёркивание снимается вместе с состояниями. Тема задаёт
 * `a:hover { text-decoration: underline }` — это (0,1,1), и она перебивает
 * одиночный класс вроде `.cb24-module-card__link` (0,1,0). Поэтому на
 * карточках подчёркивания не было в покое и появлялось под курсором.
 * Правило `.cb24 a:hover` (0,1,2) сильнее и закрывает заодно врезку
 * «Связанное», которая печатается темой внутри раздела.
 */
.cb24 a,
.cb24 a:link,
.cb24 a:visited,
.cb24 a:hover,
.cb24 a:focus,
.cb24 a:active {
	text-decoration: none;
}

/*
 * В потоке текста ссылка остаётся различимой по цвету (--link-color темы,
 * индиго на почти чёрном тексте) — так же, как в соседнем /api-bitrix/.
 */

/* --- Узкий экран --- */

@media (max-width: 600px) {
	/*
	 * Таблица кодов ошибок в три колонки на телефоне нечитаема: в первой
	 * `ERROR_ENTITY_NOT_FOUND` одним словом, минимальная ширина под 400 px
	 * при 292 доступных. Обёртка с прокруткой (она добавлена в шаблоне)
	 * спасает вёрстку, но листать таблицу вбок — плохая замена чтению,
	 * а сжать колонки до трети экрана значит рвать посреди слова
	 * и «Хранилище», и сам код.
	 *
	 * Поэтому строка разворачивается в карточку: код сверху, под ним
	 * подписанные значения. Подписи берутся из data-label ячеек — шапка
	 * таблицы в этой раскладке не видна, но остаётся в разметке
	 * для скринридеров и для копирования.
	 */
	.cb24-errors,
	.cb24-errors tbody,
	.cb24-errors tr,
	.cb24-errors td {
		display: block;
		width: auto;
	}

	.cb24-errors thead {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip-path: inset(50%);
	}

	.cb24-errors tr {
		margin-bottom: 0.75rem;
		padding: 0.75rem 0.9rem;
		border: 1px solid var(--cb24-border);
		border-radius: var(--cb24-radius);
	}

	.cb24-errors td {
		padding: 0;
		border: 0;
	}

	.cb24-errors td + td {
		margin-top: 0.5rem;
	}

	.cb24-errors td::before {
		content: attr(data-label);
		display: block;
		margin-bottom: 0.15rem;
		font-size: 0.75rem;
		color: var(--cb24-muted);
	}

	/* У кода подпись избыточна: видно и так. */
	.cb24-errors td:first-child::before {
		content: none;
	}

	.cb24-errors td:first-child code {
		overflow-wrap: anywhere;
		font-size: 0.875rem;
	}
}