/* What is my hostname (my_hostname) — стили. Каркас на Bootstrap, вид — поверх токенов theme.css.
   Композиция: две светлые карточки (большой ответ + lookup) и блок пояснений; большой hostname —
   зелёный, как в legacy-дизайне. Все цвета/размеры — токенами, без магии по месту. */

:root {
    --hostchk-w: 800px;               /* ширина колонки инструмента */
    --hostchk-radius: 16px;           /* скругление карточек (семейство cam_check) */
    --hostchk-radius-sm: 8px;

    --hostchk-surface: #ffffff;
    --hostchk-border:  #dcdfe5;
    --hostchk-soft:    #f4f5f7;       /* лёгкая подложка (чипы, hover кнопок) */
    --hostchk-shadow:  0 1px 2px rgba(17, 24, 39, .05), 0 6px 18px rgba(17, 24, 39, .06);

    --hostchk-text:    #111827;
    --hostchk-muted:   #5b6275;

    --hostchk-green:      #5eac38;    /* большой ответ — зелёный из legacy */
    --hostchk-ok:         #18a45b;    /* позитив (галочки, «ничего не выдаёт») */
    --hostchk-ok-tint:    #e6f6ec;
    --hostchk-warn:       #b3771d;    /* мягкое предупреждение (fcrdns fail) */
    --hostchk-warn-tint:  #fdf3e2;
    --hostchk-accent:     #275ec5;    /* синий сайта (--tls-accent) */
    --hostchk-accent-dark:#1c4ba3;
    --hostchk-accent-tint:#e8eefc;

    --hostchk-pad: 20px;              /* внутренний отступ карточки */
    --hostchk-gap: 1rem;              /* зазор между карточками */
}

/* Подзаголовок под сайтовым H1 */

.hostchk {
    display: flex;
    flex-direction: column;
    gap: var(--hostchk-gap);
    width: 100%;
    max-width: var(--hostchk-w);
    margin-inline: auto;
    color: var(--hostchk-text);
}

.hostchk__card {
    background: var(--hostchk-surface);
    border: 1px solid var(--hostchk-border);
    border-radius: var(--hostchk-radius);
    box-shadow: var(--hostchk-shadow);
    padding: var(--hostchk-pad);
}

/* --- Шапка главной карточки: подпись + Copy report --- */
.hostchk__head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    margin-bottom: .35rem;
}

.hostchk__label {
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--hostchk-muted);
}

.hostchk__report {
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    font-size: 13px;
    color: var(--hostchk-muted);
    background: none;
    border: 1px solid var(--hostchk-border);
    border-radius: var(--hostchk-radius-sm);
    padding: .25rem .6rem;
    transition: background-color .15s, color .15s;
}
.hostchk__report:hover { background: var(--hostchk-soft); color: var(--hostchk-text); }
.hostchk__report.is-done { color: var(--hostchk-ok); border-color: var(--hostchk-ok); }

/* Кастомные кнопки (не .btn) — без нативной фокус-обводки, как всё на сайте (правило CLAUDE.md) */
.hostchk__report:focus,
.hostchk__report:focus-visible,
.hostchk__copy:focus,
.hostchk__copy:focus-visible {
    outline: none;
    box-shadow: none;
}

/* --- Большой ответ --- */
.hostchk__answer {
    display: flex;
    align-items: baseline;
    gap: .6rem;
    min-height: 2.9rem; /* резерв под крупную строку — прелоадер не «подпрыгивает» при замене */
}

.hostchk__host {
    font-size: clamp(22px, 4.5vw, 38px);
    font-weight: 600;
    line-height: 1.2;
    color: var(--hostchk-green);
    overflow-wrap: anywhere;
    min-width: 0;
}

/* Состояния ответа: загрузка / нет PTR / ошибка — приглушённые, меньше кеглем */
.hostchk__answer[data-state="loading"] .hostchk__host,
.hostchk__answer[data-state="empty"] .hostchk__host,
.hostchk__answer[data-state="error"] .hostchk__host {
    color: var(--hostchk-muted);
    font-size: clamp(18px, 3.2vw, 24px);
    font-weight: 600;
    align-self: center;
}

.hostchk__spinner {
    display: inline-block;
    width: .9em;
    height: .9em;
    margin-right: .45rem;
    vertical-align: -.1em;
    border: 2px solid var(--hostchk-border);
    border-top-color: var(--hostchk-accent);
    border-radius: 50%;
    animation: hostchk-spin .8s linear infinite;
}
@keyframes hostchk-spin { to { transform: rotate(360deg); } }

.hostchk__note {
    color: var(--hostchk-muted);
    font-size: 14px;
    margin: .25rem 0 0;
}

/* --- Кнопки-иконки Copy --- */
.hostchk__copy {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    font-size: 14px;
    color: var(--hostchk-muted);
    background: none;
    border: 1px solid var(--hostchk-border);
    border-radius: var(--hostchk-radius-sm);
    transition: background-color .15s, color .15s;
    align-self: center;
}
.hostchk__copy:hover { background: var(--hostchk-soft); color: var(--hostchk-text); }
.hostchk__copy.is-done { color: var(--hostchk-ok); border-color: var(--hostchk-ok); }

/* --- Строка IP --- */
.hostchk__iprow {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .6rem;
    margin-top: .6rem;
}
.hostchk__iplabel { color: var(--hostchk-muted); font-size: 14px; }
.hostchk__ip {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: .02em;
    overflow-wrap: anywhere;
    min-width: 0;
}

.hostchk__divider {
    border: 0;
    border-top: 1px solid var(--hostchk-border);
    margin: 1rem 0;
    opacity: 1;
}

/* --- Подзаголовки секций внутри карточек --- */
/* Тег — div (заголовков внутри инструмента нет), поэтому line-height задаём явно: раньше 1.2 приходил
   от бутстраповского reboot для h2, у div он унаследовался бы от body (1.5) и сдвинул бы вёрстку. */
.hostchk__subtitle {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
    margin: 0 0 .35rem;
}
.hostchk__sub {
    color: var(--hostchk-muted);
    font-size: 14px;
    margin: 0 0 .75rem;
}

/* --- Ряды-выводы (разбор hostname, результат lookup) --- */
.hostchk__rows {
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: .55rem;
    margin: .35rem 0 0;
    padding: 0;
    min-height: 32px; /* резерв на один ряд — «Analyzing…» меняется на выводы без скачка */
}
.hostchk__rows--result { min-height: 0; margin-top: 0; }
.hostchk__rows--result:not(:empty) { margin-top: .85rem; }

.hostchk__row {
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    font-size: 14px;
    line-height: 1.45;
}
.hostchk__row.is-muted { color: var(--hostchk-muted); }

.hostchk__row-ic {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--hostchk-accent-tint);
    color: var(--hostchk-accent);
    font-size: 14px;
}
.hostchk__row-ic.is-ok   { background: var(--hostchk-ok-tint);   color: var(--hostchk-ok); }
.hostchk__row-ic.is-warn { background: var(--hostchk-warn-tint); color: var(--hostchk-warn); }

.hostchk__row-body { min-width: 0; overflow-wrap: anywhere; padding-top: 4px; }
.hostchk__row-body .hostchk__val { font-weight: 700; }
.hostchk__row-note { color: var(--hostchk-muted); }

/* Чипы IP-адресов в результате lookup */
.hostchk__chips {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .35rem;
    vertical-align: baseline;
}
.hostchk__chip {
    font-family: var(--bs-font-monospace, monospace);
    font-size: 13px;
    background: var(--hostchk-soft);
    border: 1px solid var(--hostchk-border);
    border-radius: 6px;
    padding: 1px 8px;
    overflow-wrap: anywhere;
}

/* --- Форма lookup --- */
.hostchk__form {
    display: flex;
    gap: .5rem;
}
.hostchk__query { flex: 1 1 auto; min-width: 0; }
/* Плейсхолдер-пример — курсивом и приглушённо, чтобы не путался с введённым значением */
.hostchk__query::placeholder { font-style: italic; color: #9aa1af; }

.hostchk__btn {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    gap: .45rem;
    background: var(--hostchk-accent);
    border: 1px solid var(--hostchk-accent);
    color: #fff;
    font-weight: 600;
    padding-inline: 1.1rem;
}
.hostchk__btn:hover:not(:disabled) { background: var(--hostchk-accent-dark); border-color: var(--hostchk-accent-dark); color: #fff; }
.hostchk__btn:disabled { background: var(--hostchk-accent); border-color: var(--hostchk-accent); color: #fff; opacity: .7; }

.hostchk__btn-spin {
    display: inline-block;
    width: .85em;
    height: .85em;
    border: 2px solid rgba(255, 255, 255, .45);
    border-top-color: #fff;
    border-radius: 50%;
    animation: hostchk-spin .8s linear infinite;
}

.hostchk__error {
    color: var(--tls-danger);
    font-size: 14px;
    margin: .6rem 0 0;
}

/* --- Мобайл: компактнее отступы и кегли --- */
@media (max-width: 575.98px) {
    :root {
        --hostchk-pad: 14px;
        --hostchk-gap: .75rem;
    }
    .hostchk__answer { min-height: 2.2rem; }
    .hostchk__host { font-size: clamp(19px, 6vw, 26px); }
    .hostchk__ip { font-size: 16px; }
    .hostchk__divider { margin: .8rem 0; }
    .hostchk__row { font-size: 13px; }
    .hostchk__row-ic { width: 28px; height: 28px; font-size: 13px; }
    .hostchk__row-body { padding-top: 3px; }
}