/* === TT-SETTINGS: AUTO — генерируется из настроек плагина (страница «Подсказки»). Не редактируйте вручную. === */
:root {
    --tt-bg: #0a4b87;
    --tt-color: #ffffff;
    --tt-link: #00a0d2;
    --tt-table-bg: #ffffff;
    --tt-table-color: #333333;
    --tt-edge: 10px;
    --tt-text-max: 260px;
    --tt-table-max: 450px;
    --tt-font-size: 14px;
    --tt-table-font-size: 14px;
    --tt-align: justify;
}
/* === TT-SETTINGS: END === */

/*
   1. СЛОВО-ТРИГГЕР В ТЕКСТЕ ПОСТА
*/
.sc-tooltip {
    position: relative !important;
    cursor: pointer !important;
    display: inline !important;
}

.sc-tooltip .tooltip-trigger {
    border-bottom: 1px dashed #0073aa !important;
    color: #0073aa !important;
    display: inline !important;
}

/*
   2. ОБЛАЧКО ПОДСКАЗКИ
   Позицию (left/top) задаёт JS через --tt-x и --tt-y.
   Пока JS не посчитал — облачко скрыто, значения-заглушки не видны.
*/
.sc-tooltip .tooltip-content {
    position: fixed !important;
    left: var(--tt-x, var(--tt-edge)) !important;
    top: var(--tt-y, var(--tt-edge)) !important;

    width: var(--tt-text-max) !important;
    max-width: calc(100vw - var(--tt-edge) * 2) !important;
    max-height: calc(100vh - var(--tt-edge) * 2) !important;
    box-sizing: border-box !important;
    padding: 12px !important;

    background-color: var(--tt-bg) !important;
    color: var(--tt-color) !important;
    text-align: var(--tt-align) !important;
    text-justify: inter-word !important;

    font-family: Arial, sans-serif !important;
    font-size: var(--tt-font-size) !important;
    line-height: 1.4 !important;
    font-weight: normal !important;
    border-radius: 6px !important;
    box-shadow: 0 4px 15px rgba(0,0,0,0.3) !important;

    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch;
    opacity: 0 !important;
    visibility: hidden !important;
    z-index: 9999 !important;
    transform: translateY(10px) scale(0.8) !important;
    transition: opacity 0.2s ease-in-out, transform 0.2s ease-in-out, visibility 0.2s !important;
}

/* АКТИВАЦИЯ ТОЛЬКО ПО КЛИКУ (класс is-active ставит JS) */
.sc-tooltip.is-active .tooltip-content {
    opacity: 1 !important;
    visibility: visible !important;
    pointer-events: auto !important;
    transform: translateY(0) scale(1) !important;
}

/* Ссылки внутри подсказки */
.sc-tooltip .tooltip-content a {
    color: var(--tt-link) !important;
    text-decoration: underline !important;
}
.sc-tooltip .tooltip-content a:hover {
    color: #ffffff !important;
}

/* Картинки внутри подсказки */
.sc-tooltip .tooltip-content img {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    border-radius: 4px !important;
    margin: 10px auto !important;
    display: block !important;
}

/*
   3. ОБЛАЧКО С ТАБЛИЦЕЙ — белое оформление, скролл.
   Ширина — по содержимому таблицы (max-content), потолок — ширина окна
   браузера с отступами var(--tt-edge) с каждой стороны. Скролл появляется
   только если таблица реально шире окна (узкие экраны).
*/
.sc-tooltip .tooltip-content:has(table) {
    background: var(--tt-table-bg) !important;
    background-color: var(--tt-table-bg) !important;
    color: var(--tt-table-color) !important;
    border: 1px solid #e0e0e0 !important;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15) !important;
    width: max-content !important;
    max-width: calc(100vw - var(--tt-edge) * 2) !important;
    font-size: var(--tt-table-font-size) !important;
    text-align: left !important;
    text-justify: auto !important;
    overflow-x: auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch;
}

.sc-tooltip .tooltip-content:has(table) * {
    color: var(--tt-table-color) !important;
    font-size: inherit !important;
}

.sc-tooltip .tooltip-content:has(table) a {
    color: #0073aa !important;
    text-decoration: underline !important;
}
.sc-tooltip .tooltip-content:has(table) a:hover {
    color: #005177 !important;
}

.sc-tooltip .tooltip-content table {
    border-collapse: collapse !important;
    border: 1px solid #dcdcdc !important;
    width: 100% !important;
    margin: 8px 0 !important;
    background: transparent !important;
}

.sc-tooltip .tooltip-content table th,
.sc-tooltip .tooltip-content table td {
    border: 1px solid #dcdcdc !important;
    padding: 6px 4px !important;
}

/*
   4. МОБИЛЬНЫЕ: таблица ровно по ширине экрана с зазором по краям
*/
@media screen and (max-width: 480px) {
    .sc-tooltip .tooltip-content:has(table),
    .sc-tooltip .tooltip-content.tt-wide {
        left: var(--tt-edge) !important;
        right: var(--tt-edge) !important;
        width: auto !important;
        max-width: calc(100vw - var(--tt-edge) * 2) !important;
        transform: translateY(10px) scale(1) !important;
    }
    .sc-tooltip.is-active .tooltip-content:has(table),
    .sc-tooltip.is-active .tooltip-content.tt-wide {
        transform: translateY(0) scale(1) !important;
    }
}

/*
   5. СБРОС ОБЁРТКИ code.tt-editor-wrapper (фикс смещения текста)
*/
code.tt-editor-wrapper {
    display: inline !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    background: transparent !important;
    background-color: transparent !important;
    font-family: inherit !important;
    font-size: inherit !important;
    line-height: inherit !important;
    color: inherit !important;
    box-shadow: none !important;
    vertical-align: baseline !important;
    white-space: normal !important;
}