/* ИИ-помощник внутри статей — значок у блока и содержимое шторки (`specs/ai-assistant.md §8`).
   Шторка — компонент рельса `gs-modal`, её рамку, поля и форму на телефоне даёт он. Здесь только то,
   чего у компонента нет. Своих чисел не приносим: цвета и радиусы — токены рельса (`gs-tokens.css`),
   поэтому тёмная тема работает без отдельных правил. */

/* ═══ Значок ✦ у блока ═══════════════════════════════════════════════════
   Виден ВСЕГДА, а не по наведению: на телефоне наведения нет, а бледный значок из прототипа
   провалил бы контраст (§8). Цвет — `--gs-ink-2` (7.46:1 на белом, требование 3:1).
   Стоит у правого края первой строки блока и обтекается текстом: наложение поверх заголовка
   закрыло бы его на узком экране. */
.gro-assist-mark {
	float: right;
	display: inline-grid;
	place-items: center;
	width: 36px;
	height: 36px;
	margin: 0 0 8px 12px;
	padding: 0;
	border: var(--gs-line-ctrl, 1.5px) solid var(--gs-line-strong, #C4C2BC);
	border-radius: 50%;
	background: var(--gs-surface, #fff);
	color: var(--gs-ink-2, #555);
	cursor: pointer;
	line-height: 0;
	transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.gro-assist-mark:hover {
	background: var(--gs-accent, #D9B648);
	border-color: var(--gs-accent, #D9B648);
	color: var(--gs-accent-ink, #000);
}
.gro-assist-mark:focus-visible {
	outline: 2px solid var(--gs-focus, #7A5F12);
	outline-offset: 2px;
}
/* ⚠️ В КАРТОЧКЕ РАЗДЕЛА ОБТЕКАНИЯ НЕТ — ЗНАЧОК В УГОЛ (25.09, «почему иконка скачет?»).
   Обтекание (`float`) работает только в обычном потоке. Карточка раздела статьи
   (`.gs-card--block`) выстроена столбиком — флексом, а у флекса `float` молча
   игнорируется: значок становился ПЕРВЫМ ЭЛЕМЕНТОМ столбца — вставал слева, отдельным
   рядом и сдвигал заголовок вниз. Замер 25.09: на опоре справа 1 значок из 4 (вводный
   блок — он обычный поток), на решении 0 из 4. С 13.09, с первого дня значка.
   Карточка уже `position: relative`, её поле — `--gs-block-pad`: значок встаёт в угол
   на это поле, заголовку оставлено место под него справа (36 + 12) — текст не наезжает. */
.gs-card.gro-assist-host > .gro-assist-mark {
	position: absolute;
	top: var(--gs-block-pad, 32px);
	right: var(--gs-block-pad, 32px);
	margin: 0;
	float: none;
}
.gs-card.gro-assist-host > .gro-assist-mark + .gs-card__title { padding-right: calc(36px + var(--gs-3, 12px)); }
@media print {
	.gro-assist-mark { display: none !important; }
}

/* ═══ Содержимое шторки ═══════════════════════════════════════════════════ */
/* Надзаголовок «✦ AI-ПОМОЩНИК» над заголовком окна — оформление с макета (просьба владельца 13.09).
   Через `::before`, а НЕ своей разметкой: у компонента окна такого аргумента нет, а копировать его
   разметку ради одной строки — значит завести вторую версию окна, которая молча отстанет от первой.
   Строка декоративная: имя окна читалке даёт заголовок. Появится аргумент у компонента — переехать туда. */
#gro-drawer-ai .gs-modal__head::before {
	content: "✦ Только из статьи";  /* 18.09: без «AI» — окно не чат, а фразы статьи */
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--gs-ink-3, #606060);
}
.gro-assist { display: flex; flex-direction: column; gap: 16px; }
.gro-assist__scope {
	margin: 0;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--gs-ink-3, #606060);
}
/* Метка группы — капителью, как «БЫСТРЫЕ ДЕЙСТВИЯ» на макете; имя раздела рядом остаётся как есть:
   «ПО РАЗДЕЛУ «ЧТО ЧАЩЕ ВСЕГО ЛОМАЕТ СИСТЕМУ»» кричало бы. */
.gro-assist__scope-key { text-transform: uppercase; letter-spacing: .06em; }
.gro-assist__acts { display: flex; flex-wrap: wrap; gap: 8px; }
/* Заливка кнопки — белая: полотно шторки бумажное, и на нём кнопка без заливки сливается с фоном
   (на макете наоборот: полотно белое, кнопки кремовые — важен отрыв, а не конкретный цвет). */
.gro-assist__act { background: var(--gs-surface, #fff); }
/* Звёздочка у действия — тот же знак, что у разделов статьи. Тёмное золото, а не светлое:
   на бумажном фоне светлое даёт 1,9:1. Знак декоративный, подпись рядом словами. */
.gro-assist__act-ico { margin-right: 6px; color: var(--gs-focus, #7A5F12); }
.gro-assist__act[aria-pressed="true"] {
	border-color: var(--gs-ink, #000);
	box-shadow: inset 0 0 0 1px var(--gs-ink, #000);
}
.gro-assist__act--locked { border-style: dashed; color: var(--gs-ink-2, #555); }
.gro-assist__upgrade { align-self: flex-start; margin-top: 12px; text-decoration: none; }
.gro-assist__answer:empty { display: none; }
/* Подсказка стартового экрана: где ещё есть значки ✦ — тише кнопок, но читаемо. */
.gro-assist__hint { margin: 0; font-size: 13px; line-height: 1.5; color: var(--gs-ink-2, #555); }
.gro-assist__head { margin: 0 0 8px; font-weight: 500; }
.gro-assist__status { margin: 0; color: var(--gs-ink-2, #555); }
.gro-assist__status.is-error { color: var(--gs-ink, #000); }
.gro-assist__list {
	margin: 0;
	padding-left: 1.4em;
	display: flex;
	flex-direction: column;
	gap: 12px;
	line-height: 1.55;
}
.gro-assist__list--checklist { list-style: none; padding-left: 0; }
.gro-assist__list.is-single { padding-left: 0; }
blockquote.gro-assist__item { margin: 0; padding-left: 14px; border-left: 3px solid var(--gs-accent, #D9B648); }
.gro-assist__item { overflow-wrap: anywhere; }
.gro-assist__kind {
	display: block;
	font-size: 12px;
	letter-spacing: .02em;
	color: var(--gs-ink-3, #606060);
}
.gro-assist__quote { display: block; }
/* Строка раздела — кнопка перехода к самому разделу: карта, которую нельзя нажать, повторяла бы
   панель «Содержание» страницы. Своих чисел нет: кнопка наследует шрифт и цвет строки. */
.gro-assist__jump {
	display: block;
	width: 100%;
	margin: 0;
	padding: 0;
	border: 0;
	background: none;
	font: inherit;
	color: inherit;
	text-align: left;
	cursor: pointer;
}
.gro-assist__jump:hover .gro-assist__quote--main,
.gro-assist__jump:focus-visible .gro-assist__quote--main {
	text-decoration: underline;
	text-underline-offset: 2px;
}
.gro-assist__jump:focus-visible { outline: 2px solid var(--gs-focus, #7A5F12); outline-offset: 2px; }
.gro-assist__note { margin: 0 0 12px; font-size: 13px; color: var(--gs-ink-2, #555); }
/* «Кратко» в строе статьи: абзацы и список, как на странице, без нумерации. */
.gro-assist__brief { line-height: 1.55; overflow-wrap: anywhere; }
.gro-assist__brief-p { margin: 0 0 12px; }
.gro-assist__brief-list { margin: 0 0 12px; padding-left: 1.2em; display: flex; flex-direction: column; gap: 8px; }
.gro-assist__brief-list strong { font-weight: 600; }
.gro-assist__brief > :last-child { margin-bottom: 0; }
/* «Что объясняет раздел» — наша подпись, не цитата: тише заголовка и без кавычечной интонации. */
.gro-assist__why { display: block; margin-top: 2px; color: var(--gs-ink-2, #555); }
/* Закрытый раздел в легенде: видно, что он даёт, но открыть нечего. */
.gro-assist__item--locked .gro-assist__quote--title { color: var(--gs-ink-2, #555); }
.gro-assist__lock {
	display: inline-block;
	margin-top: 4px;
	padding: 1px 8px;
	border: 1px dashed var(--gs-line-strong, #C4C2BC);
	border-radius: 999px;
	font-size: 12px;
	color: var(--gs-ink-2, #555);
}
/* Строка раздела = заголовок + первая фраза: заголовок держит вес, фраза идёт под ним. */
.gro-assist__quote--title { font-weight: 500; }
.gro-assist__quote + .gro-assist__quote { margin-top: 2px; }
.gro-assist__from,
.gro-assist__src { font-size: 13px; color: var(--gs-ink-2, #555); }
.gro-assist__from { display: block; margin-top: 4px; }
.gro-assist__link { color: var(--gs-ink, #000); text-decoration: underline; text-underline-offset: 2px; }
.gro-assist__link:focus-visible,
.gro-assist__check:focus-visible { outline: 2px solid var(--gs-focus, #7A5F12); outline-offset: 2px; }
.gro-assist__locked { margin: 12px 0 0; padding-top: 12px; border-top: 1px dashed var(--gs-line, #D6D5D0); }
.gro-assist__locked .gro-assist__quote { color: var(--gs-ink-2, #555); }
.gro-assist__list--checklist .gro-assist__item { display: flex; gap: 10px; align-items: flex-start; }
.gro-assist__check { margin-top: .3em; width: 18px; height: 18px; flex: none; accent-color: var(--gs-ink, #000); }
.gro-assist__caption {
	margin: 0;
	padding-top: 12px;
	border-top: 1px solid var(--gs-line, #D6D5D0);
	font-size: 12px;
	line-height: 1.5;
	color: var(--gs-ink-3, #606060);
}