/*
 * Переиспользуемые компоненты: кнопки, инпуты, карточки, пиллы, точки,
 * плюс шапка/футер сайта (т.к. они общие для всех страниц).
 */

/* ============================================================ */
/* Логотип */
/* ============================================================ */

.sc-logo {
    display: inline-flex;
    align-items: center;
    gap: 10px;
}
.sc-logo__mark {
    width: 28px;
    height: 28px;
    border-radius: 50%;   /* круглый, как аватар бота (раньше — скруглённый квадрат) */
    overflow: hidden;
    background: #fff;
    box-shadow: 0 0 0 1px var(--sc-line);
    flex-shrink: 0;
}
.sc-logo__mark img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.sc-logo__text {
    font-weight: 600;
    font-size: 17px;
    letter-spacing: -0.015em;
    color: var(--sc-ink);
}

/* ============================================================ */
/* Кнопки */
/* ============================================================ */

.sc-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    border-radius: var(--sc-r);
    font-weight: 500;
    font-size: 14px;
    line-height: 1;
    white-space: nowrap;
    border: 1px solid transparent;
    background: transparent;
    color: var(--sc-ink);
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s, transform 0.06s, box-shadow 0.12s;
    text-decoration: none;
}
.sc-btn:active { transform: translateY(0.5px); }
.sc-btn:disabled,
.sc-btn[disabled] {
    opacity: 0.5;
    cursor: not-allowed;
}
.sc-btn--primary {
    background: var(--sc-accent);
    color: #fff;
}
.sc-btn--primary:hover { background: var(--sc-accent-hover); opacity: 1; }
.sc-btn--ghost {
    background: transparent;
    color: var(--sc-ink);
    border-color: var(--sc-line-2);
}
.sc-btn--ghost:hover {
    background: var(--sc-paper-2);
    border-color: var(--sc-ink-4);
    opacity: 1;
}
.sc-btn--soft {
    background: var(--sc-accent-soft);
    color: var(--sc-accent-ink);
}
.sc-btn--soft:hover { background: var(--sc-accent-soft-2); opacity: 1; }
.sc-btn--sm  { height: 30px; font-size: 13px; padding: 0 12px; border-radius: var(--sc-r-sm); }
.sc-btn--lg  { height: 48px; font-size: 15px; padding: 0 22px; }
.sc-btn--block { width: 100%; }
.sc-btn--icon { width: 38px; padding: 0; }
.sc-btn--icon.sc-btn--sm { width: 30px; }

/* ============================================================ */
/* Инпуты */
/* ============================================================ */

.sc-input {
    display: block;
    width: 100%;
    height: 40px;
    padding: 0 14px;
    border: 1px solid var(--sc-line-2);
    border-radius: var(--sc-r);
    background: var(--sc-paper);
    color: var(--sc-ink);
    font-size: 14px;
    transition: border-color 0.12s, box-shadow 0.12s;
}
.sc-input:focus {
    outline: none;
    border-color: var(--sc-accent);
    box-shadow: 0 0 0 3px var(--sc-accent-soft);
}
.sc-input::placeholder { color: var(--sc-ink-4); }

/* ============================================================ */
/* Карточки */
/* ============================================================ */

.sc-card {
    background: var(--sc-paper);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
}
.sc-card--lift {
    transition: transform 0.16s, box-shadow 0.16s, border-color 0.16s;
}
.sc-card--lift:hover {
    transform: translateY(-2px);
    border-color: var(--sc-ink-4);
}
.sc-card__pad     { padding: 24px; }
.sc-card__pad-sm  { padding: 16px; }

/* ============================================================ */
/* Пиллы и точки */
/* ============================================================ */

.sc-pill {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 500;
    line-height: 1;
}
.sc-pill--mono {
    font-family: var(--sc-font-mono);
    font-size: 11.5px;
}
.sc-pill--accent { background: var(--sc-accent-soft); color: var(--sc-accent-ink); }
.sc-pill--green  { background: var(--sc-green-soft);  color: var(--sc-green-ink); }
.sc-pill--amber  { background: var(--sc-amber-soft);  color: var(--sc-amber-ink); }
.sc-pill--red    { background: var(--sc-red-soft);    color: var(--sc-red-ink); }
/* Нейтральная пилюля для статусов вроде «отменено» — не ошибка,
   просто терминальное состояние без действия. Серый фон, неактивный текст. */
.sc-pill--muted  { background: var(--sc-paper-3);     color: var(--sc-ink-3); }

.sc-dot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
    display: inline-block;
}
.sc-dot--accent { background: var(--sc-accent); }
.sc-dot--green  { background: var(--sc-green); }
.sc-dot--amber  { background: var(--sc-amber); }
.sc-dot--red    { background: var(--sc-red); }
.sc-dot--muted  { background: var(--sc-ink-4); }

/* ============================================================ */
/* Шапка публичного сайта */
/* ============================================================ */

.sc-site-header {
    position: sticky;
    top: 0;
    z-index: 40;
    background: oklch(from var(--sc-paper) l c h / 0.85);
    backdrop-filter: saturate(140%) blur(8px);
    -webkit-backdrop-filter: saturate(140%) blur(8px);
    border-bottom: 1px solid var(--sc-line);
}
.sc-site-header__inner {
    max-width: var(--sc-container-wide);
    margin: 0 auto;
    padding: 0 32px;
    height: 64px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
}
.sc-site-header__nav {
    display: flex;
    align-items: center;
    gap: 32px;
    font-size: 14px;
    color: var(--sc-ink-2);
}
.sc-site-header__nav a:hover { color: var(--sc-ink); opacity: 1; }
.sc-site-header__cta {
    display: flex;
    align-items: center;
    gap: 8px;
}

/* Переключатель темы — в шапке и в кабинете. Иконка sun/moon скрывается через
   data-theme на <html> (см. ниже). FOUC-скрипт в v-top.php проставляет атрибут
   до первой отрисовки, так что в момент загрузки уже видна правильная иконка. */
.sc-theme-toggle {
    width: 36px;
    height: 36px;
    border-radius: var(--sc-r-sm);
    color: var(--sc-ink-2);
    border: 1px solid var(--sc-line-2);
    background: transparent;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sc-theme-toggle:hover {
    background: var(--sc-paper-2);
    color: var(--sc-ink);
    border-color: var(--sc-ink-4);
}
.sc-theme-toggle__sun,
.sc-theme-toggle__moon { display: none; }
:root:not([data-theme="dark"]) .sc-theme-toggle__moon { display: inline-flex; }
[data-theme="dark"] .sc-theme-toggle__sun { display: inline-flex; }

@media (max-width: 760px) {
    .sc-site-header__inner { padding: 0 16px; gap: 12px; }
    .sc-site-header__nav { display: none; }
    .sc-site-header__cta { gap: 6px; }
}

/* На очень узких экранах: шапка переполняется (логотип-текст + 2 CTA +
   тема). Прячем длинный лейбл «Попробовать бесплатно», оставляем «Бесплатно».
   Логотип сжимаем до иконки. */
@media (max-width: 480px) {
    .sc-logo__text { display: none; }
    .sc-cta-short  { display: inline; }
    .sc-cta-long   { display: none; }
}
.sc-cta-short  { display: none; }
.sc-cta-long   { display: inline; }

/* ============================================================ */
/* User-меню в шапке (аватар + dropdown)                          */
/* ============================================================ */
.sc-user-menu { position: relative; }
.sc-user-menu__avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--sc-accent);
    color: #fff;
    font-weight: 600;
    font-size: 13px;
    line-height: 1;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 1px solid transparent;
    transition: filter 0.12s, transform 0.08s;
}
.sc-user-menu__avatar:hover { filter: brightness(1.05); }
.sc-user-menu__avatar:active { transform: scale(0.97); }

.sc-user-menu__pop {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 220px;
    background: var(--sc-paper);
    border: 1px solid var(--sc-line);
    border-radius: var(--sc-r-lg);
    box-shadow: var(--sc-shadow-hover);
    padding: 8px;
    z-index: 50;
    display: none;
}
.sc-user-menu[data-open="1"] .sc-user-menu__pop { display: block; }

.sc-user-menu__head {
    padding: 8px 10px 10px;
    border-bottom: 1px solid var(--sc-line);
    margin-bottom: 6px;
}
.sc-user-menu__name {
    font-size: 13px;
    font-weight: 600;
    color: var(--sc-ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-user-menu__email {
    font-size: 11px;
    color: var(--sc-ink-3);
    margin-top: 2px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.sc-user-menu__item {
    display: block;
    width: 100%;
    text-align: left;
    padding: 8px 10px;
    font-size: 13px;
    color: var(--sc-ink-2);
    background: transparent;
    border: 0;
    border-radius: var(--sc-r-sm);
    cursor: pointer;
}
.sc-user-menu__item:hover { background: var(--sc-paper-2); color: var(--sc-ink); }
.sc-user-menu__item--danger { color: var(--sc-red-ink); }
.sc-user-menu__item--danger:hover { background: var(--sc-red-soft); color: var(--sc-red-ink); }

/* ============================================================ */
/* Футер публичного сайта */
/* ============================================================ */

.sc-site-footer {
    border-top: 1px solid var(--sc-line);
    padding: 56px 0 0;
    color: var(--sc-ink-2);
}
.sc-site-footer__inner {
    max-width: var(--sc-container);
    margin: 0 auto;
    padding: 0 32px;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 48px;
}
.sc-site-footer__brand { max-width: 280px; }
.sc-site-footer__tag {
    margin-top: 16px;
    font-size: 12px;
    line-height: 1.6;
    color: var(--sc-ink-3);
}
.sc-site-footer__cols {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 48px;
    flex: 1;
}
.sc-site-footer__title {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    font-weight: 500;
    color: var(--sc-ink-4);
    margin-bottom: 14px;
}
.sc-site-footer__col ul { display: flex; flex-direction: column; gap: 10px; font-size: 14px; }
.sc-site-footer__col a { color: var(--sc-ink-2); }
.sc-site-footer__col a:hover { color: var(--sc-ink); opacity: 1; }

.sc-site-footer__bottom {
    margin-top: 48px;
    padding: 24px 0;
    border-top: 1px solid var(--sc-line);
    font-size: 12px;
    color: var(--sc-ink-4);
}
.sc-site-footer__bottom-inner {
    align-items: center;
    padding-top: 0;
    padding-bottom: 0;
    gap: 16px;
}

@media (max-width: 760px) {
    .sc-site-footer__inner { flex-direction: column; gap: 32px; padding: 0 16px; }
    .sc-site-footer__cols { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 32px; width: 100%; }
}

/* Очень узкие экраны: 2 колонки футера превращаются в 1 — иначе списки
   ссылок цепляются друг за друга. */
@media (max-width: 400px) {
    .sc-site-footer__cols { grid-template-columns: 1fr; gap: 24px; }
}

/* ============================================================ */
/* Мобильные доводки (общие)                                      */
/* ============================================================ */

/*
 * iOS Safari зумит страницу при фокусе на input/textarea/select с
 * font-size < 16px. Базовый .sc-input — 14px → на айфоне каждый тап по
 * полю (логин, поиск в кабинете/транскрипте, настройки, пароль шэра)
 * дёргал авто-зум вьюпорта. На мобиле поднимаем шрифт полей до 16px —
 * зум отключается, десктоп не трогаем. Код подтверждения (.sc-input--code,
 * 24px) и hero-инпут (16px) и так крупнее — их это правило не задевает.
 */
@media (max-width: 760px) {
    .sc-input { font-size: 16px; }
    textarea.sc-input,
    select.sc-input { font-size: 16px; }
}

/*
 * Тач-таргеты. На десктопе мелкие иконочные кнопки ок (мышь точна),
 * на тач-экране палец требует ~44px. Раздувать ВСЕ кнопки нельзя —
 * это сломало бы плотные топбары кабинета/транскрипта (там тема/иконки
 * специально сжаты до 30px, чтобы помещаться). Поэтому увеличиваем
 * только «одиночно стоящие» контролы. Топбарные переопределения
 * (dashboard.css/transcript.css) грузятся позже и перебьют это правило
 * там, где нужно сжать — каскад сам разрулит.
 */
@media (pointer: coarse) {
    .sc-theme-toggle { width: 40px; height: 40px; }
}

/* ============================================================ */
/* Мобильное меню публичной шапки (бургер)                        */
/* ============================================================ */

/*
 * На ≤760px основная nav скрывается (см. блок 760px выше) и появляется
 * бургер, раскрывающий выпадающую панель с теми же ссылками + входом/
 * кабинетом. Состояние — атрибут data-sc-menu="1" на .sc-site-header
 * (ставит инлайн-скрипт из v-top.php, как и переключатель темы).
 */
.sc-site-burger {
    display: none;
    width: 40px;
    height: 40px;
    border-radius: var(--sc-r-sm);
    color: var(--sc-ink-2);
    border: 1px solid var(--sc-line-2);
    background: transparent;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    flex-shrink: 0;
    transition: background 0.12s, color 0.12s, border-color 0.12s;
}
.sc-site-burger:hover { background: var(--sc-paper-2); color: var(--sc-ink); }
.sc-site-burger__close { display: none; }
.sc-site-header[data-sc-menu="1"] .sc-site-burger__open  { display: none; }
.sc-site-header[data-sc-menu="1"] .sc-site-burger__close { display: inline-flex; }

/* Пункты, которые нужны только в мобильной панели (Вход/Кабинет) —
   на десктопе их роль играют кнопки CTA, поэтому прячем. */
.sc-site-header__nav-extra { display: none; }

@media (max-width: 760px) {
    .sc-site-burger { display: inline-flex; }

    /* Навигация: из инлайн-строки → выпадающая панель под шапкой. */
    .sc-site-header__nav {
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        display: none;
        flex-direction: column;
        align-items: stretch;
        gap: 2px;
        padding: 8px;
        background: var(--sc-paper);
        border-bottom: 1px solid var(--sc-line);
        box-shadow: var(--sc-shadow-hover);
        max-height: calc(100dvh - 64px);
        overflow-y: auto;
    }
    .sc-site-header[data-sc-menu="1"] .sc-site-header__nav { display: flex; }
    .sc-site-header__nav a {
        padding: 12px 14px;
        border-radius: var(--sc-r-sm);
        font-size: 15px;
        color: var(--sc-ink);
    }
    .sc-site-header__nav a:hover { background: var(--sc-paper-2); opacity: 1; }
    .sc-site-header__nav-extra {
        display: block;
        margin-top: 4px;
        padding-top: 8px;
        border-top: 1px solid var(--sc-line);
        color: var(--sc-accent-ink);
        font-weight: 500;
    }
}

/* На очень узких прячем вторичную кнопку «Войти» из шапки — вход
   доступен пунктом в бургер-панели, освобождаем место для бургера. */
@media (max-width: 420px) {
    .sc-site-header__cta .sc-cta-login { display: none; }
}