/**
 * Блок кода Luau (ТЗ §52).
 *
 * Пять требований §52 закрыты здесь и в шаблоне: подсветка, копирование,
 * имя файла, номера строк и горизонтальный скролл на мобильном.
 *
 * Тема светлая, как и весь портал: тёмный редактор внутри белой карточки
 * выглядел бы вставкой из другого макета. Цвета токенов взяты из палитры
 * проекта — фиолетовый для ключевых слов, синий для вызовов, зелёный
 * для строк, приглушённый серый для комментариев.
 *
 * Номера строк — счётчик списка в псевдоэлементе: их нельзя выделить
 * мышью, и в буфер попадает только код. Кнопка копирования берёт текст
 * из скрытого textarea, поэтому копируется исходный листинг с табуляциями.
 */

.code {
    margin: var(--space-5) 0 0;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-card);
    background: var(--bg-soft);
    overflow: hidden;
}

.code:first-child {
    margin-top: 0;
}

/* ── Шапка: имя файла и копирование ──────────────────────────────── */

.code__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3);
    padding: 10px 14px;
    border-bottom: 1px solid var(--border-card);
    background: var(--bg-card);
}

.code__file {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    min-width: 0;
    font-family: var(--font-mono);
    font-size: var(--fs-micro);
    color: var(--text-secondary);
}

.code__file span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.code__file svg {
    flex: none;
    color: var(--text-muted);
}

.code__copy {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    flex: none;
    height: var(--control-height-sm);
    padding: 0 12px;
    border: 1px solid var(--border-card);
    border-radius: var(--radius-sm);
    background: var(--bg-card);
    color: var(--text-secondary);
    font-family: var(--font-base);
    font-size: var(--fs-micro);
    font-weight: var(--fw-semibold);
    cursor: pointer;
    transition: color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease);
}

.code__copy:hover {
    color: var(--primary);
    border-color: var(--primary);
}

.code__copy[data-copied="1"] {
    color: var(--success-text);
    border-color: var(--success);
}

/* ── Листинг ─────────────────────────────────────────────────────── */

.code__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.code__lines {
    display: block;
    margin: 0;
    padding: var(--space-4) 0;
    list-style: none;
    counter-reset: code-line;
    font-family: var(--font-mono);
    font-size: var(--fs-small);
    line-height: 1.65;
    tab-size: 4;
    min-width: max-content;
}

.code__line {
    display: block;
    position: relative;
    padding: 0 var(--space-5) 0 56px;
    counter-increment: code-line;
    white-space: pre;
}

.code__line::before {
    content: counter(code-line);
    position: absolute;
    left: 0;
    width: 40px;
    text-align: right;
    color: var(--text-muted);
    opacity: .7;
    user-select: none;
    -webkit-user-select: none;
}

.code__line code {
    font: inherit;
    color: var(--text-primary);
    background: none;
    padding: 0;
}

/* ── Токены ──────────────────────────────────────────────────────── */

.code__t--comment {
    color: var(--text-muted);
    font-style: italic;
}

.code__t--string {
    color: var(--success-text);
}

.code__t--number {
    color: var(--warning-text);
}

.code__t--keyword {
    color: var(--purple);
    font-weight: var(--fw-semibold);
}

.code__t--global {
    color: var(--primary-2);
}

.code__t--method {
    color: var(--accent-blue);
}

.code__t--property {
    color: var(--text-primary);
}

.code__t--operator {
    color: var(--text-secondary);
}

/* ── Подпись под листингом ───────────────────────────────────────── */

.code__note {
    margin: 0;
    padding: 10px 14px;
    border-top: 1px solid var(--border-card);
    background: var(--bg-card);
    font-size: var(--fs-xs);
    color: var(--text-secondary);
}

@media (max-width: 640px) {
    .code__lines {
        font-size: var(--fs-xs);
    }

    .code__line {
        padding-left: 44px;
    }

    .code__line::before {
        width: 30px;
    }
}