@font-face {
    font-family: "TT Norms Pro";
    src: url("/fonts/tt-norms-pro/tt-norms-pro-medium.woff2") format("woff2");
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}

@font-face {
    font-family: "TT Norms Pro";
    src: url("/fonts/tt-norms-pro/tt-norms-pro-extrabold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    /* Прописные нарисованы от нижнего выноса до круглой капители, а метрика шрифта оставляет снизу больше пустоты, чем сверху. Обрезка делает эти поля равными. */
    ascent-override: 77%;
    descent-override: 20%;
    line-gap-override: 0%;
}

@font-face {
    font-family: "TT Norms Pro Button";
    src: url("/fonts/tt-norms-pro/tt-norms-pro-extrabold.woff2") format("woff2");
    font-weight: 800;
    font-style: normal;
    font-display: swap;
    /* Середина капители выше середины строки, которую центрирует кнопка:
       подпись без выноса Д, Ц или Щ оказывается выше центра. Эти поля
       ставят середину капители в центр строки. Бреве Й в расчёт не входит. */
    ascent-override: 85%;
    descent-override: 15%;
    line-gap-override: 0%;
}

:root {
    --ink: #1e1e1e;
    --muted: #5d6b7a;
    --soft: rgba(15, 15, 15, .48);
    --line: #dde3ea;
    --field-line: #c3ccd6;
    --field-line-hover: #8f9bab;
    --paper: #ffffff;
    --canvas: #0f0f0f;
    --danger: #c40000;
    --placeholder: #757575;
    --font: "TT Norms Pro", system-ui, sans-serif;
}

* { box-sizing: border-box; }

[hidden] { display: none !important; }

body {
    margin: 0;
    background: var(--canvas);
    color: var(--ink);
    font: 500 16px/1.4 var(--font);
    letter-spacing: -.01em;
    font-feature-settings: "liga" 0;
    -webkit-font-smoothing: antialiased;
}

.stand-bar {
    background: var(--canvas);
    color: rgba(255, 255, 255, .55);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-align: center;
    padding: 12px 16px 0;
}

.stand-bar strong {
    color: #fff;
    font-weight: 800;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.stand-bar a { color: #fff; }

.topbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    max-width: 1270px;
    margin: 0 auto;
    padding: 28px 16px 0;
}

/* Центр только у входа. Первый профиль тоже без кнопок, но лого остаётся слева. */
body.is-auth .topbar { justify-content: center; }

.brand { display: block; line-height: 0; }

.brand img { display: block; max-width: 100%; height: auto; }

.topbar-side {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 16px;
}

.langs {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 7px;
    margin-left: 30px;
}

.langs a {
    color: #fff;
    font-weight: 800;
    font-size: 14px;
    line-height: 1;
    letter-spacing: .04em;
    text-decoration: none;
    text-transform: uppercase;
}

.langs a[aria-current="true"] { color: #fc4d14; }

.topnav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 12px;
}

.shell { max-width: 1270px; margin: 0 auto; padding: 48px 16px; }

body.is-auth .shell { max-width: 56rem; }

.card {
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: 16px;
    padding: 28px;
    box-shadow: 0 1px 1px rgba(27, 36, 48, .05), 0 8px 12px rgba(27, 36, 48, .04);
}

.card + .card { margin-top: 24px; }

h1 {
    margin: 0 0 12px;
    font-weight: 800;
    font-size: 28px;
    line-height: 1;
    letter-spacing: -.02em;
    text-transform: uppercase;
}

h2 {
    margin: 0 0 12px;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.lead {
    margin: 0 0 24px;
    color: var(--ink);
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.lead strong { font-weight: 500; }

.mail-line {
    margin: 0 0 4px;
    font-size: 20px;
    font-weight: 500;
    line-height: 1.4;
    letter-spacing: -.01em;
}

#screen-code .lead { margin-bottom: 4px; }

#screen-code > p:not(.lead):not(.mail-line):not(.center) { margin: 0 0 24px; }

.back-link {
    display: inline-block;
    margin: 0 0 24px;
    padding: 0;
    border: 0;
    background: none;
    color: var(--soft);
    font: 500 12px/1.1 var(--font);
    letter-spacing: 0;
    text-decoration: none;
    cursor: pointer;
    transition: color .2s ease;
}

.link-button:hover { text-decoration: underline; }

/* В макете наведение и фокус только темнеют до чёрного токена, без линии. */
.back-link:is(:hover, :focus) { color: #0f0f0f; }

.field { margin-bottom: 24px; }

/* Чекбокс согласия — сама подпись в ряд, ему нужен flex из .check */
.field > label:not(.check):not(.file-field),
.field .label {
    display: block;
    margin-bottom: 8px;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.01em;
}

.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

.field .hint {
    margin: 8px 0 0;
    color: var(--muted);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
}

input[type=text],
input[type=email],
input[type=search],
select,
textarea,
input[type=file] {
    display: block;
    width: 100%;
    min-height: 47px;
    padding: 10px 13px;
    font: 500 16px/1.4 var(--font);
    letter-spacing: -.01em;
    color: var(--ink);
    background: #fff;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    outline: none;
    transition: border-color .2s ease;
}

:is(input[type=text], input[type=email], input[type=search], select, textarea):is(:hover, :focus) {
    border-color: var(--field-line-hover);
}

input::placeholder,
textarea::placeholder { color: var(--placeholder); }

input[readonly] {
    background: #eceff1;
    color: rgba(15, 15, 15, .72);
    cursor: default;
}

textarea { min-height: 156px; resize: vertical; }

select {
    appearance: none;
    padding-right: 36px;
    background-image: linear-gradient(45deg, transparent 50%, #1e1e1e 50%), linear-gradient(135deg, #1e1e1e 50%, transparent 50%);
    background-position: calc(100% - 20px) center, calc(100% - 14px) center;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
}

/* Скрытый select хранит значение формы. Снаружи — поиск и список пунктов. */
.picker-box { position: relative; }

.picker-box:focus-within { z-index: 5; }

.picker-query { padding-right: 36px; }

.picker-box::after {
    content: '';
    position: absolute;
    top: 20px;
    right: 16px;
    border-width: 5px 4px 0;
    border-style: solid;
    border-color: #1e1e1e transparent transparent;
    pointer-events: none;
}

.picker-query::-webkit-search-decoration,
.picker-query::-webkit-search-cancel-button,
.picker-query::-webkit-search-results-button { display: none; }

.picker-list {
    position: absolute;
    z-index: 2;
    top: calc(100% + 4px);
    left: 0;
    right: 0;
    max-height: 240px;
    margin: 0;
    padding: 4px;
    overflow: auto;
    list-style: none;
    background: #fff;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(15, 15, 15, .08);
}

.picker-group,
.picker-empty {
    padding: 8px 12px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 500;
    line-height: 1.3;
}

.picker-option {
    padding: 8px 12px;
    border-radius: 6px;
    cursor: pointer;
    font: 500 16px/1.4 var(--font);
    letter-spacing: -.01em;
}

.picker-option.is-chosen { font-weight: 600; }

.picker-option.is-active { background: #eceff1; }

input[type=file]::file-selector-button {
    margin-right: 12px;
    padding: 0;
    border: 0;
    background: transparent;
    color: var(--placeholder);
    font: 500 16px/1.4 var(--font);
    cursor: pointer;
}

/* Нативный выбор файла рисует кнопку браузера и «файл не выбран». Макет — одно поле, подпись внутри рамки. */
.file-field {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    min-height: 47px;
    margin: 0;
    padding: 0 14px;
    overflow: hidden;
    background: #fff;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    cursor: pointer;
    transition: background-color .2s ease, border-color .2s ease;
}

.field:not(.has-error) .file-field:hover {
    background: #f6f6f6;
    border-color: var(--field-line-hover);
}

.field:not(.has-error) .file-field:focus-within { border-color: var(--field-line-hover); }

.file-field:hover .file-field-name:not(.is-chosen) {
    color: var(--ink);
}

.hint + .file-field { margin-top: 8px; }

.file-field-name {
    overflow: hidden;
    color: var(--placeholder);
    font: 500 16px/19px var(--font);
    letter-spacing: -0.3125px;
    text-overflow: ellipsis;
    white-space: nowrap;
    transition: color .2s ease;
}

.file-field-name.is-chosen { color: var(--ink); }

.file-field input[type=file] {
    position: absolute;
    inset: 0;
    z-index: 1;
    width: 100%;
    height: 100%;
    min-height: 0;
    margin: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    opacity: 0;
    cursor: pointer;
}

.file-field input[type=file]:focus-visible { outline: none; }

.has-error .file-field { border-color: var(--danger); background: #fffafa; }

.has-error .file-field:hover { background: #fff5f5; }

.has-error .file-field:hover,
.has-error .file-field:focus-within { border-color: var(--danger); }

input[type=checkbox]:focus-visible,
button:focus-visible,
a:focus-visible {
    outline: 2px solid #0f0f0f;
    outline-offset: 2px;
}

.topbar :focus-visible { outline-color: #fff; }

.has-error input,
.has-error select,
.has-error textarea,
.has-error :is(input[type=text], input[type=email], input[type=search], select, textarea):is(:hover, :focus) {
    border-color: var(--danger);
    background: #fffafa;
}

.error {
    margin: 8px 0 0;
    color: var(--danger);
    font-size: 14px;
    font-weight: 500;
    line-height: 1.1;
}

.grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; }

.check {
    display: flex;
    gap: 8px;
    align-items: center;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.01em;
    cursor: pointer;
}

.check input {
    width: 27px;
    height: 28px;
    margin: 0;
    flex: none;
    accent-color: #0f0f0f;
}

.check a {
    color: inherit;
    text-underline-offset: 3px;
    transition: color .2s ease;
}

.check a:hover {
    color: #fc4d14;
}

.fieldset-title {
    margin: 32px 0 12px;
    color: var(--soft);
    font-size: 14px;
    font-weight: 800;
    line-height: 1.1;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    min-height: 44px;
    padding: 10px 18px;
    border: 1px solid transparent;
    border-radius: 0;
    background: transparent;
    color: var(--ink);
    font: 800 14px/1.1 var(--font);
    font-family: "TT Norms Pro Button", var(--font);
    letter-spacing: -.01em;
    text-transform: uppercase;
    text-decoration: none;
    cursor: pointer;
    transition: background-color .2s ease;
}

.btn-lg { min-height: 56px; padding: 16px 18px; font-size: 16px; }

.btn-primary { background: #0f0f0f; color: #fff; border-color: #0f0f0f; }

.btn-primary:hover:not(:disabled) { background: #2a2a2a; }

.btn-light { background: #fff; color: #0f0f0f; border-color: #fff; }

.btn-light:hover:not(:disabled) { background: #f3f3f3; }

.btn-secondary { background: #fff; color: #0f0f0f; border-color: #0f0f0f; }

.btn-secondary:hover:not(:disabled) { background: #f6f6f6; }

.btn-ghost { background: transparent; color: #fff; border-color: #fff; }

.btn-ghost:hover:not(:disabled) { background: rgba(255, 255, 255, .08); }

.btn-danger { background: #fff; color: var(--danger); border-color: var(--danger); }

.btn-danger:hover:not(:disabled) { background: #fff5f5; }

.btn:disabled { opacity: .45; cursor: not-allowed; }

/* В макете иконка и подпись стоят с зазором 4px, но у подписи свой
   внутренний отступ: 6px у кнопки 44px и 12px у кнопки 56px.
   Слева у иконки 12px и 18px соответственно. */
.with-plus,
.with-arrow,
.with-profile {
    padding-left: 12px;
    gap: 10px;
}

.btn-lg.with-plus,
.btn-lg.with-arrow,
.btn-lg.with-profile {
    padding-right: 30px;
    padding-left: 18px;
    gap: 16px;
}

.with-plus::before,
.with-arrow::before,
.with-profile::before {
    content: "";
    display: block;
    width: 20px;
    height: 20px;
    flex: none;
    align-self: center;
    background-repeat: no-repeat;
    background-position: center;
    background-size: 20px 20px;
}

.with-plus::before { background-image: url("/dev/cabinet/plus.svg"); }

.btn-light.with-plus::before { background-image: url("/dev/cabinet/plus-ink.svg"); }

.with-arrow::before { background-image: url("/dev/cabinet/arrow.svg"); }

.with-profile::before { background-image: url("/dev/cabinet/profile.svg"); }

/* Оранжевая иконка — только у страницы, которая открыта сейчас. */
.topnav a[aria-current="page"].with-plus::before { background-image: url("/dev/cabinet/plus-accent.svg"); }

.topnav a[aria-current="page"].with-profile::before { background-image: url("/dev/cabinet/profile-accent.svg"); }

.link-button {
    padding: 0;
    border: 0;
    background: none;
    color: var(--soft);
    font: 500 14px/1.1 var(--font);
    letter-spacing: 0;
    text-decoration: underline;
    text-transform: none;
    cursor: pointer;
}

.link-button:disabled { opacity: .5; cursor: not-allowed; }

.actions,
.essay-actions { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 12px 24px; }

.center { margin: 16px 0 0; color: var(--soft); font-size: 14px; text-align: center; }

.notice { margin-bottom: 16px; padding: 12px 14px; border-radius: 8px; font-size: 16px; font-weight: 500; line-height: 1.4; }

.notice a { color: inherit; }

.notice-info { background: #f3f4f6; color: var(--ink); }

.notice-success { background: #eefbe4; color: #146c12; }

.notice-warning { background: #fff1ea; color: #9a320c; }

.notice-error { background: #fdecec; color: var(--danger); }

.cabinet-card > .lead { margin-bottom: 0; }

.card > h1:has(+ #profile-form) { margin-bottom: 24px; }

.field:has(#profile-email) + .fieldset-title { margin-top: 0; }

.theme-card {
    margin-top: 24px;
    padding: 24px;
}

.essay-title-row { display: flex; align-items: center; justify-content: space-between; gap: 16px; }

.essay-title-row h1 { margin: 0; }

.essay-marks { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; }

.essay-title {
    margin: 0;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.essay-name {
    margin: 24px 0 0;
    font-weight: 500;
    font-size: 20px;
    line-height: 1.4;
    letter-spacing: -.01em;
    text-transform: none;
    overflow-wrap: anywhere;
}

.essay-meta { margin: 8px 0 0; color: var(--muted); font-size: 14px; line-height: 1.1; letter-spacing: 0; }

.meta-list { display: flex; flex-direction: column; gap: 24px; margin: 24px 0 0; }

.theme-card .meta-list { gap: 12px; margin: 12px 0 0; }

.theme-card .essay-actions { margin-top: 24px; }

.essay-title-row + .meta-list,
#screen-check .meta-list { gap: 24px; margin-top: 24px; }

#essay-card > .fieldset-title,
#versions-card > .fieldset-title { margin-top: 64px; }

.meta-label {
    margin: 0;
    color: var(--soft);
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
}

.meta-value {
    margin: 4px 0 0;
    font-size: 16px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    overflow-wrap: anywhere;
}

.meta-item + .meta-item { margin-top: 0; }

.badge {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    min-height: 33px;
    padding: 10px 18px;
    border-radius: 500px;
    color: #fff;
    font: 800 12px/1.1 var(--font);
    letter-spacing: -.01em;
    text-transform: uppercase;
    white-space: nowrap;
}

.badge::before {
    content: "";
    width: 12px;
    height: 12px;
    flex: none;
    background: url("/dev/cabinet/dot.svg") center / 12px 12px no-repeat;
}

/* Пять цветов — из макета статусов. Остальные статусы кабинета красятся из той же палитры. */
.badge-text_check { background: #3a3a3a; }

.badge-in_review { background: #fc4d14; }

.badge-longlist,
.badge-list { background: #1e1e1e; }

.badge-hold { background: #8a5a00; }

.badge-interview { background: #00aeff; }

.badge-clarification { background: #ff0682; }

.badge-shortlist { background: #146c12; }

.badge-accepted { background: #77e841; }

.badge-rejected { background: #c40000; }

.badge-withdrawn,
.badge-cancelled { background: #5d6b7a; }

.theme-name {
    margin: 0 0 24px;
    font-weight: 800;
    font-size: 20px;
    line-height: 1.2;
    letter-spacing: -.01em;
    text-transform: uppercase;
}

.required-mark { color: var(--danger); }

.optional-mark { color: var(--soft); font-weight: 500; font-size: 14px; text-transform: none; letter-spacing: 0; }

.essay-text {
    padding: 12px 14px;
    border: 1px solid var(--field-line);
    border-radius: 8px;
    background: #fff;
    overflow-wrap: anywhere;
}

.essay-text p:first-child { margin-top: 0; }

.essay-text p:last-child { margin-bottom: 0; }

.essay-text.is-empty { color: var(--muted); font-style: italic; }

.essay-text img { max-width: 100%; height: auto; }

.essay-text table,
.tox-edit-area table { width: 100%; border-collapse: collapse; }

.essay-text th,
.essay-text td,
.tox-edit-area th,
.tox-edit-area td { padding: .4rem .6rem; border: 1px solid #d1d5db; vertical-align: top; }

.essay-text h1,
.essay-text h2,
.essay-text h3 { margin: 1.1em 0 .4em; line-height: 1.2; text-transform: none; letter-spacing: -.01em; }

.essay-text h1 { font-size: 28px; }

.essay-text h2 { font-size: 22px; }

.essay-text h3 { font-size: 18px; }

.essay-text blockquote { margin: .8em 0; padding-left: 1rem; border-left: 3px solid var(--line); color: var(--muted); }

.essay-text.is-clamped { position: relative; max-height: 320px; overflow: hidden; }

.essay-text.is-clamped::after {
    content: "";
    position: absolute;
    right: 0;
    bottom: 0;
    left: 0;
    height: 3.5rem;
    background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #fff);
    pointer-events: none;
}

.essay-text mark { padding: 0 .1em; border-radius: 2px; background: #fff1a8; color: inherit; }

.essay-text del { color: var(--danger); background: #fdecec; text-decoration: line-through; }

.essay-text .diff-removed { margin: .4em 0; font-size: .9rem; }

.text-toggle { min-height: 33px; margin-top: 8px; padding-top: 9px; padding-bottom: 9px; }

.essay-actions-top { margin: 0 0 12px; }

.window-note {
    flex: 1 1 220px;
    max-width: 358px;
    margin: 0;
    color: var(--soft);
    font-size: 12px;
    font-weight: 500;
    line-height: 1.1;
    letter-spacing: 0;
    text-transform: none;
}

.version-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 0 0 12px;
    border-bottom: 1px solid var(--line);
}

.version-row + .version-row { margin-top: 12px; }

.version-row .essay-meta { margin: 12px 0 0; color: var(--ink); font-size: 16px; line-height: 1.4; letter-spacing: -.01em; }

.version-row .essay-meta + .essay-meta { display: flex; gap: 12px; margin-top: 2px; }

.version-row strong { display: block; margin: 0; font-size: 20px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; text-transform: none; }

.tox-tinymce { margin: 12px 0 !important; border: 1px solid var(--field-line) !important; border-radius: 8px !important; }

.tox-tinymce:hover,
.tox-tinymce.tox-edit-focus { border-color: var(--field-line-hover) !important; }

.essay-tools { margin-top: 16px; padding-top: 16px; border-top: 1px solid var(--line); }

.essay-tools summary { color: #0f0f0f; font-weight: 800; cursor: pointer; }

.empty { padding: 28px 16px; color: var(--muted); text-align: center; }

.api-log { margin-top: 24px; color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.1; }

.api-log summary { cursor: pointer; }

#log {
    min-height: 2.5rem;
    max-height: 12rem;
    margin: 8px 0 0;
    padding: 12px;
    overflow: auto;
    border-radius: 8px;
    background: #1a1a1a;
    color: #d6dde6;
    font: 13px/1.5 ui-monospace, SFMono-Regular, Menlo, monospace;
    letter-spacing: 0;
    white-space: pre-wrap;
}

.doc-links { display: flex; flex-wrap: wrap; gap: 12px; }

#screen-submit h1 { margin-bottom: 24px; }

#screen-submit .lead { margin-bottom: 8px; }

#screen-submit .theme-name { margin: 0 0 24px; }

#screen-submit .theme-name + .lead { margin-bottom: 24px; }

#submit-form > .fieldset-title:first-of-type { margin-top: 0; }

#submit-form .field { margin-bottom: 12px; }

#submit-form > .field:last-of-type { margin-bottom: 32px; }

.follow-form { margin: 24px 0; }

@media (max-width: 720px) {
    .shell { padding: 32px 16px; }

    .card { padding: 20px 16px; }

    .grid { grid-template-columns: 1fr; }

    h1 { font-size: 22px; }

    .field > label,
    .lead,
    .check { font-size: 16px; }

    .topbar { align-items: center; flex-direction: column; }

    .topbar-side { width: 100%; flex-direction: column; align-items: stretch; }

    .langs { margin-left: 0; margin-top: 30px; }

    .topnav {
        align-self: stretch;
        flex-direction: column;
        align-items: stretch;
    }

    .topnav .btn { width: 100%; }

    .essay-title-row { flex-direction: column-reverse; }

    .essay-actions .btn,
    .actions .btn { flex: 1 1 100%; }
}