/* ==========================================================================
   ОБРАЩЕНИЕ  —  /contact
   --------------------------------------------------------------------------
   Прежняя страница была колонкой сведений и формой рядом: срок ответа,
   обещание про хранилище вложений и два блока «для правообладателей» и
   «реклама и партнёрство» занимали левую половину экрана, а то, ради чего
   сюда приходят, стояло справа и начиналось ниже сгиба.

   Здесь форма и есть страница, а всё, что было в колонке, разложено туда,
   где оно нужно:
     • срок ответа — строкой под заголовком: это первое, что хотят знать,
       прежде чем писать;
     • обещание про вложения — рядом с самими вложениями;
     • «правообладателям» и «реклама» — подсказкой, которая появляется, когда
       выбрана соответствующая тема. Раньше это были два блока, мимо которых
       проходили, потому что читать их полагалось до того, как поймёшь, что
       они про тебя.

   Тема выбирается первой и рядом, а не выпадающим списком в середине формы:
   на телефоне список из десяти тем — это отдельный экран.

   Подсказка темы показывается на :has() — без сценария. Там, где :has() не
   работает, подсказки просто нет: она дополняет форму, а не держит её.
   ========================================================================== */

.k-ct { max-width: 780px; }

/* --------------------------------------------------------------------------
   ГОЛОВА.
   -------------------------------------------------------------------------- */

.k-ct__h {
    margin: 0;
    font-family: var(--kt-font-display);
    font-size: clamp(36px, 5.4vw, 66px);
    font-weight: 400;
    line-height: 1;
    letter-spacing: -.025em;
    text-wrap: balance;
}

.k-ct__lead {
    max-width: 58ch;
    margin: 18px 0 0;
    font-size: 15.5px;
    line-height: 1.65;
    color: var(--kt-muted);
    text-wrap: pretty;
}

/* Срок ответа — не карточка со значком, а строка: одно число, которое
   человек хочет знать до того, как начнёт писать. */
.k-ct__eta {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    margin-top: 26px;
    padding-bottom: 26px;
    font-family: var(--kt-font-mono);
    font-size: 9.5px;
    letter-spacing: .16em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-ct__eta b { color: var(--kt-ink); font-weight: 500; }
.k-ct__eta svg { color: var(--kt-accent-ink); }

/* --------------------------------------------------------------------------
   ТЕМА.
   -------------------------------------------------------------------------- */

.k-ct__block { padding-top: 30px; border-top: 1px solid var(--kt-line); margin-top: 4px; }
.k-ct__block + .k-ct__block { margin-top: 34px; }

/* Тема лежит в fieldset — группе переключателей нужен один заголовок на всю
   группу. Рамку и поля браузера снимаем: линия сверху здесь своя. */
fieldset.k-ct__block { min-width: 0; padding-inline: 0; padding-bottom: 0; margin-inline: 0; border: 0; border-top: 1px solid var(--kt-line); }
.k-ct__block legend { display: block; float: none; width: 100%; padding: 0; }

.k-ct__lab {
    display: block;
    margin-bottom: 14px;
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-ct__lab b { color: var(--kt-accent-ink); font-weight: 400; }

.k-ct__topics { display: flex; flex-wrap: wrap; gap: 8px; }

.k-ct__topic {
    display: inline-flex;
    align-items: center;
    height: 38px;
    padding: 0 16px;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    color: var(--kt-muted);
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.k-ct__topic input { position: absolute; opacity: 0; pointer-events: none; }
.k-ct__topic:hover { border-color: var(--kt-line-2); color: var(--kt-ink); }

.k-ct__topic:has(input:checked) {
    border-color: transparent;
    background: var(--kt-accent);
    color: var(--kt-on-accent);
}

.k-ct__topic:has(input:focus-visible) { outline: 2px solid var(--kt-accent); outline-offset: 2px; }

/* Подсказка темы: появляется, когда выбрана та самая тема. */
.k-ct__tip {
    display: none;
    align-items: baseline;
    flex-wrap: wrap;
    gap: 8px;
    margin-top: 16px;
    padding-left: 14px;
    border-left: 2px solid var(--kt-accent);
    font-size: 13.5px;
    line-height: 1.55;
    color: var(--kt-muted);
}

.k-ct__topics:has(#kct-copyright:checked) ~ .k-ct__tip--copyright,
.k-ct__topics:has(#kct-advertising:checked) ~ .k-ct__tip--advertising { display: flex; }

.k-ct__tip b { color: var(--kt-ink); font-weight: 700; }

.k-ct__tip a {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--kt-accent-ink);
    text-decoration: none;
    font-weight: 650;
}

.k-ct__tip a svg { transition: transform .25s var(--kt-ease); }
.k-ct__tip a:hover svg { transform: translateX(3px); }

/* --------------------------------------------------------------------------
   ПОЛЯ.
   Линия вместо коробки — как в поиске и в правке папки: на странице, где
   полей шесть, шесть рамок читаются решёткой.
   -------------------------------------------------------------------------- */

.k-ct__two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

.k-ct__f { display: block; margin-bottom: 22px; }
.k-ct__f:last-child { margin-bottom: 0; }

.k-ct__f input[type="text"],
.k-ct__f input[type="email"],
.k-ct__f textarea {
    width: 100%;
    padding: 0 0 10px;
    border: 0;
    border-bottom: 1px solid var(--kt-line-2);
    border-radius: 0;
    background: transparent;
    color: var(--kt-ink);
    font: inherit;
    font-size: 16px;
    outline: 0;
    resize: vertical;
    transition: border-color .2s ease;
}

.k-ct__f textarea { line-height: 1.6; padding-top: 4px; }
.k-ct__f input:focus, .k-ct__f textarea:focus { border-bottom-color: var(--kt-accent); }
.k-ct__f ::placeholder { color: var(--kt-line-2); }

.k-ct__count {
    display: block;
    margin-top: 8px;
    font-family: var(--kt-font-mono);
    font-size: 9.5px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--kt-muted);
    text-align: right;
}

/* --------------------------------------------------------------------------
   ВЛОЖЕНИЯ.
   -------------------------------------------------------------------------- */

.k-ct__drop {
    position: relative;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 20px;
    border: 1px dashed var(--kt-line-2);
    border-radius: var(--kt-r-lg);
    color: var(--kt-muted);
    cursor: pointer;
    transition: border-color .2s ease, background .2s ease;
}

.k-ct__drop:hover { border-color: var(--kt-accent); }
.k-ct__drop.is-dragging { border-color: var(--kt-accent); background: rgba(var(--kt-accent-rgb), .07); }
.k-ct__drop input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.k-ct__drop svg { flex: 0 0 auto; color: var(--kt-accent-ink); }
.k-ct__dropt { display: block; font-size: 14px; font-weight: 650; color: var(--kt-ink); }
.k-ct__dropa { display: block; margin-top: 2px; font-size: 12.5px; }

.k-ct__files { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; }
.k-ct__files:empty { display: none; }

.k-ct__file {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-md);
    background: var(--kt-surface);
}

.k-ct__file svg { flex: 0 0 auto; color: var(--kt-muted); }
.k-ct__filem { min-width: 0; flex: 1 1 auto; }
.k-ct__filem strong { display: block; font-size: 13.5px; font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.k-ct__filem small { display: block; font-family: var(--kt-font-mono); font-size: 10px; color: var(--kt-muted); }

.k-ct__file button {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: 50%;
    background: transparent;
    color: var(--kt-muted);
    cursor: pointer;
    transition: background .2s ease, color .2s ease;
}

.k-ct__file button:hover { background: rgba(224, 78, 78, .12); color: #E04E4E; }

/* Обещание про хранилище стоит рядом с вложениями, а не в колонке сведений:
   оно отвечает на вопрос, который возникает ровно здесь. */
.k-ct__safe {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    margin-top: 14px;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kt-muted);
}

.k-ct__safe svg { flex: 0 0 auto; margin-top: 1px; color: var(--kt-accent-ink); }
.k-ct__safe b { color: var(--kt-ink); font-weight: 650; }

/* --------------------------------------------------------------------------
   СОГЛАСИЕ И ОТПРАВКА.
   -------------------------------------------------------------------------- */

.k-ct__foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 20px;
    margin-top: 34px;
    padding-top: 28px;
    border-top: 1px solid var(--kt-line);
}

.k-ct__ok {
    display: flex;
    align-items: flex-start;
    gap: 11px;
    max-width: 46ch;
    font-size: 12.5px;
    line-height: 1.5;
    color: var(--kt-muted);
    cursor: pointer;
}

.k-ct__ok input { position: absolute; opacity: 0; pointer-events: none; }

.k-ct__box {
    display: grid;
    place-items: center;
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    margin-top: 1px;
    border: 1px solid var(--kt-line-2);
    border-radius: 6px;
    color: transparent;
    transition: border-color .2s ease, background .2s ease, color .2s ease;
}

.k-ct__ok:has(input:checked) .k-ct__box { border-color: transparent; background: var(--kt-accent); color: var(--kt-on-accent); }
.k-ct__ok:has(input:focus-visible) .k-ct__box { outline: 2px solid var(--kt-accent); outline-offset: 2px; }
.k-ct__ok a { color: var(--kt-accent-ink); text-decoration: underline; text-underline-offset: 2px; }

.k-ct__send {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    flex: 0 0 auto;
    height: 48px;
    padding: 0 26px;
    border: 0;
    border-radius: 999px;
    background: var(--kt-accent);
    color: var(--kt-on-accent);
    font: inherit;
    font-size: 14px;
    font-weight: 700;
    cursor: pointer;
    transition: transform .2s var(--kt-ease), opacity .2s ease;
}

.k-ct__send:hover { transform: translateY(-2px); }
.k-ct__send:disabled { opacity: .6; cursor: default; transform: none; }
.k-ct__send svg { transition: transform .25s var(--kt-ease); }
.k-ct__send:hover svg { transform: translateX(3px); }
.k-ct__send .k-ct__spin { display: none; animation: kCtSpin 1s linear infinite; }
.k-ct__send.is-loading .k-ct__arrow { display: none; }
.k-ct__send.is-loading .k-ct__spin { display: block; }

@keyframes kCtSpin { to { transform: rotate(360deg); } }

/* --------------------------------------------------------------------------
   ОШИБКИ.
   -------------------------------------------------------------------------- */

.k-ct__errs {
    display: flex;
    gap: 12px;
    margin-bottom: 30px;
    padding: 18px 20px;
    border: 1px solid rgba(224, 78, 78, .4);
    border-radius: var(--kt-r-lg);
    background: rgba(224, 78, 78, .07);
    color: #E04E4E;
    outline: 0;
}

.k-ct__errs svg { flex: 0 0 auto; margin-top: 1px; }
.k-ct__errs ul { margin: 0; padding-left: 18px; font-size: 13.5px; line-height: 1.6; }

/* --------------------------------------------------------------------------
   ПРИНЯТО.
   -------------------------------------------------------------------------- */

.k-ct__done {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: clamp(32px, 5vw, 48px);
    border: 1px solid var(--kt-line);
    border-radius: var(--kt-r-xl);
    background: var(--kt-surface);
}

.k-ct__dico {
    display: grid;
    place-items: center;
    width: 60px;
    height: 60px;
    margin-bottom: 24px;
    border-radius: 50%;
    background: rgba(var(--kt-accent-rgb), .16);
    color: var(--kt-accent-ink);
}

.k-ct__dh {
    margin: 0;
    font-family: var(--kt-font-display);
    font-size: clamp(28px, 3.6vw, 40px);
    font-weight: 400;
    line-height: 1.05;
    letter-spacing: -.02em;
}

.k-ct__dt { margin: 12px 0 0; max-width: 52ch; font-size: 15px; line-height: 1.6; color: var(--kt-muted); }

/* Номер обращения — единственное, что человек унесёт с этой страницы:
   набран так, чтобы его можно было прочитать вслух и переписать. */
.k-ct__ticket {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 26px 0 0;
    padding: 16px 20px;
    border: 1px dashed var(--kt-line-2);
    border-radius: var(--kt-r-md);
}

.k-ct__tlab {
    font-family: var(--kt-font-mono);
    font-size: 9px;
    letter-spacing: .18em;
    text-transform: uppercase;
    color: var(--kt-muted);
}

.k-ct__tno {
    font-family: var(--kt-font-mono);
    font-size: 19px;
    letter-spacing: .1em;
    color: var(--kt-accent-ink);
    user-select: all;
}

.k-ct__again {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-top: 28px;
    height: 44px;
    padding: 0 22px;
    border: 1px solid var(--kt-line);
    border-radius: 999px;
    color: var(--kt-ink);
    font-size: 13.5px;
    font-weight: 650;
    text-decoration: none;
    transition: border-color .2s ease, background .2s ease;
}

.k-ct__again:hover { border-color: var(--kt-line-2); background: rgba(var(--kt-ink-rgb), .04); }

/* Ловушка для машин: поле, которое человек не увидит и не заполнит. */
.k-ct__trap { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* --------------------------------------------------------------------------
   УЗКИЕ ЭКРАНЫ.
   -------------------------------------------------------------------------- */

@media (max-width: 640px) {
    .k-ct__two { grid-template-columns: minmax(0, 1fr); gap: 0; }
    .k-ct__foot { flex-direction: column; align-items: stretch; }
    .k-ct__send { justify-content: center; width: 100%; }
    .k-ct__drop { flex-direction: column; align-items: flex-start; }
}