/* Анализ структуры конкурентов - /text-seo-tools/struktura-konkurentov
   Значения сняты с proverka-metategov.css (дизайн-система inputs-style.css):
   ритм 8px, текст 12px, карточки radius 8px, разделители --main-gray-color.
   Всё заскоуплено под #struct-calc, чтобы не задеть соседние калькуляторы. */

/* ============ Форма ============ */
#struct-calc .sc-meta {
    display: flex;
    justify-content: flex-end;
    margin: 8px 0 16px;
}

#struct-calc .sc-counter {
    font-size: 12px;
    color: #777;
}

#struct-calc .sc-counter.is-over {
    color: #c0392b;
    font-weight: 600;
}

#struct-calc .calc-error {
    display: none;
    margin: 16px 0;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fdecea;
    color: #c0392b;
    font-size: 12px;
    line-height: 1.5;
}

#struct-calc .sc-loading {
    display: none;
    align-items: center;
    gap: 8px;
    margin: 16px 0;
    font-size: 12px;
    color: #555;
}

#struct-calc .sc-spinner {
    width: 16px;
    height: 16px;
    border: 2px solid #ddd;
    border-top-color: #111;
    border-radius: 50%;
    animation: sc-spin 0.8s linear infinite;
    flex: none;
}

@keyframes sc-spin {
    to { transform: rotate(360deg); }
}

@media (prefers-reduced-motion: reduce) {
    #struct-calc .sc-spinner { animation-duration: 3s; }
}

/* ============ Результаты ============ */
#struct-calc .sc-results {
    margin-top: 24px;
}

#struct-calc .sc-block {
    margin-bottom: 32px;
    padding-top: 24px;
    border-top: 1px solid var(--main-gray-color, #e0e0e0);
}

#struct-calc .sc-block__title {
    font-size: 16px;
    margin: 0 0 16px;
}

#struct-calc .sc-note {
    font-size: 12px;
    color: #777;
    line-height: 1.6;
    margin: 0 0 12px;
}

#struct-calc .sc-ok {
    font-size: 12px;
    color: #1e7e34;
    margin: 0;
}

/* ---- Сколько адресов вошло в анализ (плашка над планом) ---- */
#struct-calc .sc-intake {
    margin-bottom: 16px;
    padding: 12px 16px;
    border-radius: 8px;
    background: #fff8e6;
    border: 1px solid #f0dca8;
    font-size: 12px;
    line-height: 1.6;
    color: #6b5600;
}

/* конкурентов осталось мало - процентам покрытия верить уже нельзя, акцент сильнее */
#struct-calc .sc-intake.is-weak {
    background: #fdecea;
    border-color: #f5c6cb;
    color: #c0392b;
}

#struct-calc .sc-intake a {
    color: inherit;
    text-decoration: underline;
}

#struct-calc .sc-intake__warn {
    margin-top: 4px;
    font-weight: 600;
}

/* ---- Сводка ---- */
#struct-calc .sc-stats {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 16px;
}

#struct-calc .sc-stat {
    flex: 1 1 120px;
    padding: 12px;
    border: 1px solid var(--main-gray-color, #e0e0e0);
    border-radius: 8px;
    text-align: center;
}

#struct-calc .sc-stat.is-bad {
    border-color: #f5c6cb;
    background: #fdf3f4;
}

#struct-calc .sc-stat__num {
    display: block;
    font-size: 16px;
    font-weight: 600;
}

#struct-calc .sc-stat__label {
    display: block;
    font-size: 12px;
    color: #777;
    margin-top: 4px;
    line-height: 1.4;
}

/* ---- Дерево структуры ---- */
#struct-calc .sc-legend {
    font-size: 12px;
    color: #777;
    margin-bottom: 12px;
}

#struct-calc .sc-legend__must {
    font-weight: 600;
    color: #111;
}

#struct-calc .sc-tree {
    border: 1px solid var(--main-gray-color, #e0e0e0);
    border-radius: 8px;
    overflow: hidden;
}

#struct-calc .sc-node {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px;
    border-bottom: 1px solid var(--main-gray-color, #e0e0e0);
    font-size: 12px;
}

#struct-calc .sc-node:last-child {
    border-bottom: none;
}

#struct-calc .sc-node--h3 {
    padding-left: 32px;
    background: #fafafa;
}

/* Звёздочка обязательного раздела: псевдоэлемент, чтобы не плодить разметку */
#struct-calc .sc-node.is-must .sc-node__title::before {
    content: "*";
    color: #111;
    font-weight: 700;
    margin-right: 4px;
}

#struct-calc .sc-node__tag {
    flex: none;
    width: 24px;
    font-weight: 600;
    color: #777;
}

#struct-calc .sc-node__title {
    flex: 1 1 auto;
    min-width: 0;
    word-break: break-word;
}

#struct-calc .sc-node.is-must .sc-node__title {
    font-weight: 600;
}

#struct-calc .sc-node__cov {
    flex: none;
    color: #555;
    font-variant-numeric: tabular-nums;
}

#struct-calc .sc-node__bar {
    flex: none;
    width: 64px;
    height: 6px;
    border-radius: 3px;
    background: #eee;
    overflow: hidden;
}

#struct-calc .sc-node__bar i {
    display: block;
    height: 100%;
    background: #111;
}

/* width:auto по той же причине, что и у кнопок выгрузки */
#struct-calc .sc-copy {
    width: auto;
    margin-top: 12px;
    padding: 8px 16px;
    font-size: 12px;
    border: 1px solid var(--main-gray-color, #e0e0e0);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

#struct-calc .sc-copy:hover {
    border-color: #111;
}

/* ---- Пропуски ---- */
#struct-calc .sc-gaps {
    margin: 0;
    padding: 0;
    list-style: none;
}

#struct-calc .sc-gaps li {
    display: flex;
    align-items: baseline;
    gap: 8px;
    padding: 8px 0;
    font-size: 12px;
    border-bottom: 1px solid var(--main-gray-color, #e0e0e0);
}

#struct-calc .sc-gaps li:last-child {
    border-bottom: none;
}

#struct-calc .sc-gaps__cov {
    flex: none;
    font-weight: 600;
    color: #c0392b;
    font-variant-numeric: tabular-nums;
}

/* ---- Таблицы ---- */
#struct-calc .sc-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

#struct-calc .sc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 12px;
    min-width: 620px;
}

#struct-calc .sc-table th,
#struct-calc .sc-table td {
    padding: 12px 8px;
    text-align: left;
    vertical-align: top;
    border-bottom: 1px solid var(--main-gray-color, #e0e0e0);
}

#struct-calc .sc-table th {
    font-weight: 600;
    color: #555;
    white-space: nowrap;
}

#struct-calc .sc-table tr.is-own {
    background: #f6f9ff;
}

/* Страница не вошла в консенсус, но её состав показан: приглушаем, не прячем */
#struct-calc .sc-table tr.is-excluded {
    background: #fafafa;
    color: #999;
}

#struct-calc .sc-badge {
    display: inline-block;
    padding: 2px 6px;
    margin-right: 4px;
    border-radius: 4px;
    background: #eee;
    color: #777;
    font-size: 11px;
    white-space: nowrap;
}

#struct-calc .sc-h1 {
    max-width: 260px;
    word-break: break-word;
}

#struct-calc .sc-miss {
    color: #c0392b;
}

#struct-calc .sc-drop {
    color: #999;
}

#struct-calc .sc-issues {
    color: #777;
    max-width: 240px;
    word-break: break-word;
}

#struct-calc .sc-lag {
    color: #c0392b;
    font-weight: 600;
}

/* ---- Матрица ---- */
#struct-calc .sc-matrix {
    min-width: 560px;
}

#struct-calc .sc-matrix__title {
    max-width: 240px;
    word-break: break-word;
}

/* Домены вертикально: иначе десять колонок не помещаются даже на десктопе */
#struct-calc .sc-matrix__dom {
    vertical-align: bottom;
    height: 120px;
    padding: 0 4px 8px;
    white-space: nowrap;
}

#struct-calc .sc-matrix__dom span {
    display: inline-block;
    transform: rotate(180deg);
    writing-mode: vertical-rl;
    font-weight: 400;
    color: #777;
}

#struct-calc .sc-cell {
    text-align: center;
    color: #ddd;
}

#struct-calc .sc-cell.is-yes {
    color: #1e7e34;
    font-weight: 700;
}

#struct-calc .sc-matrix__sum {
    text-align: center;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ---- FAQ ---- */
#struct-calc .sc-faq {
    margin: 0;
    padding: 0;
    list-style: none;
}

#struct-calc .sc-faq li {
    padding: 8px 0;
    font-size: 12px;
    line-height: 1.5;
    border-bottom: 1px solid var(--main-gray-color, #e0e0e0);
}

#struct-calc .sc-faq li:last-child {
    border-bottom: none;
}

#struct-calc .sc-faq__cov {
    display: inline-block;
    min-width: 20px;
    margin-right: 4px;
    font-weight: 600;
    color: #1e7e34;
}

/* ---- Не разобрано ---- */
#struct-calc .sc-failed,
#struct-calc .sc-excluded {
    margin: 0 0 12px;
    padding: 0;
    list-style: none;
}

#struct-calc .sc-failed li,
#struct-calc .sc-excluded li {
    padding: 8px 0;
    font-size: 12px;
    color: #777;
    border-bottom: 1px solid var(--main-gray-color, #e0e0e0);
}

#struct-calc .sc-failed li:last-child,
#struct-calc .sc-excluded li:last-child {
    border-bottom: none;
}

#struct-calc .sc-failed__host {
    font-weight: 600;
    color: #555;
}

/* ---- Лимит и выгрузка ---- */
#struct-calc .sc-limit {
    font-size: 12px;
    color: #777;
    margin: 0 0 16px;
}

#struct-calc .sc-export {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
}

/* ⚠ Глобальное .calculator-wrapper button в inputs-style.css ставит width:calc(100%),
   из-за чего кнопки выгрузки вставали в столбик. Здесь ширина по содержимому,
   чтобы «Скачать CSV» и «Скачать Excel» стояли в одну строку. */
#struct-calc .sc-export__btn {
    width: auto;
    flex: 0 0 auto;
    padding: 8px 16px;
    font-size: 12px;
    border: 1px solid var(--main-gray-color, #e0e0e0);
    border-radius: 8px;
    background: #fff;
    cursor: pointer;
}

#struct-calc .sc-export__btn:hover {
    border-color: #111;
}

@media (max-width: 768px) {
    #struct-calc .sc-block__title { font-size: 14px; }
    #struct-calc .sc-stat { flex: 1 1 45%; }
    #struct-calc .sc-node { flex-wrap: wrap; }
    #struct-calc .sc-node__bar { display: none; }
    #struct-calc .sc-node--h3 { padding-left: 24px; }
}