/*
 * Подсказка «i» кабинета (`sc_tip_html()`, inc/tip.php). Свой файл, а не срез Claude Design:
 * `parts/*.css` - побайтовые копии проекта дизайна, и чужое правило в них потерялось бы.
 * Только логические свойства.
 */
.sc-tip{position:relative;display:inline-flex;align-items:center;vertical-align:middle}
.sc-tip__b{display:inline-flex;align-items:center;justify-content:center;inline-size:20px;block-size:20px;
  padding:0;border:0;border-radius:50%;background:transparent;color:var(--sc-ink-500);cursor:pointer;line-height:0}
.sc-tip__b .sc-icon{font-size:16px}
.sc-tip__b:hover,.sc-tip__b[aria-expanded="true"]{color:var(--sc-text)}
.sc-tip__b:focus-visible{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:1px}
/* Без скрипта пояснение стоит строкой рядом со значком - иначе оно пропало бы целиком. */
.sc-tip__t{margin-inline-start:6px;font-size:13px;line-height:18px;color:var(--sc-text-muted)}
html.js .sc-tip__t{display:none;position:absolute;z-index:30;inset-block-start:calc(100% + 6px);inset-inline-start:-8px;
  inline-size:max-content;max-inline-size:min(280px,70vw);margin:0;padding:8px 12px;border-radius:var(--sc-radius-ctl);
  background:var(--sc-ink-950);color:var(--sc-plane);font-size:13px;font-weight:var(--sc-fw-text);line-height:18px;
  white-space:normal;text-align:start;box-shadow:var(--sc-shadow-overlay)}
html.js .sc-tip[data-open] .sc-tip__t{display:block}
/* У конечного края слой ложится влево от значка: признак ставит скрипт, когда места справа нет. */
html.js .sc-tip[data-end] .sc-tip__t{inset-inline-start:auto;inset-inline-end:-8px}

/*
 * ЗНАК ВОПРОСА У ПОЛЗУНКА РЕДАКТОРА (решение владельца 12.10.2026): имя полосы слева, значение
 * справа, рядом знак с пояснением наведением. Плашка - общая плашка редактора `[data-tip]`
 * (`siteedit.css`), здесь только два отличия: текст переносится (пояснение длиннее имени
 * образца цвета) и плашка стоит от начала строки, а не по центру значка - иначе у левого края
 * листа она обрезалась бы. Открывается и простым фокусом: на телефоне наведения нет, а нажатие
 * пальцем `:focus-visible` не даёт.
 */
.sc-se__rngName{display:inline-flex;align-items:center;gap:2px}
.sc-se__rngHelp{display:inline-flex;align-items:center;justify-content:center;inline-size:20px;block-size:20px;
  padding:0;border:0;border-radius:50%;background:transparent;color:var(--sc-ink-500);cursor:help;line-height:0}
.sc-se__rngHelp .sc-icon{font-size:16px}
.sc-se__rngHelp:hover,.sc-se__rngHelp:focus{color:var(--sc-text)}
.sc-se__rngHelp:focus-visible{outline:var(--sc-focus-ring-w) solid var(--sc-focus-ring);outline-offset:1px}
.sc-se .sc-se__rngHelp[data-tip]::after{inset-inline-start:-8px;inline-size:max-content;max-inline-size:240px;
  white-space:normal;text-align:start;font-weight:var(--sc-fw-text);translate:0 4px}
.sc-se .sc-se__rngHelp[data-tip]:hover::after,.sc-se .sc-se__rngHelp[data-tip]:focus::after{opacity:1;translate:0 0}