/* Страницы турниров ЦДТ «Октябрьский».

   Дополнение к оформлению главной, а не второе оформление. Цвета, шрифты,
   шапка, низ и ширина поля берутся из `/style.css`; здесь только то, чего на
   главной нет: афиша турнира, таблица состава и форма записи.

   Поэтому ни одного своего цвета в этом файле: всё через переменные главной.
   Появится третья страница — она получит тот же вид, ничего не подбирая. */

/* Афиша: то же светлое поле со скруглением, что «Шахматы в ЦДТ» на главной.
   Родитель, пришедший по ссылке из чата, попадает не на чужую страницу, а на
   тот же сайт — узнавание держится на этом поле. */
.afisha {
  margin-top: 26px;
  border-radius: 26px;
  overflow: hidden;
  background: linear-gradient(135deg, #f0fbfd 0%, var(--biryuza-svet) 45%, var(--biryuza-svet2) 100%);
  box-shadow: 0 14px 34px rgba(0, 96, 128, .10);
}
.afisha .nutro { padding: 42px 48px 40px; }

/* Заголовок афиши — что это вообще. Стоит над датой и набран тише названия:
   он объясняет, а не спорит с тем, ради чего страницу открыли. */
.afisha .chto-eto {
  font-family: 'Unbounded', sans-serif; font-weight: 500;
  font-size: 14px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--indigo); opacity: .6; margin-bottom: 14px;
}
.afisha .kogda {
  font-family: 'Golos Text', sans-serif;
  font-weight: 600; font-size: 15px; letter-spacing: .02em;
  color: var(--krasnyy); margin-bottom: 12px;
}
.afisha h1 {
  margin: 0 0 14px;
  font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: clamp(25px, 3.4vw, 36px); line-height: 1.1; letter-spacing: -.02em;
  color: var(--indigo);
}
/* Логотип турнира у названия: кружком, как на боевом сайте школы. На узком
   экране он уезжает над заголовком, иначе названию остаётся полполосы. */
.zagolovok-afishi { display: flex; align-items: center; gap: 18px; }
.logotip-turnira {
  width: 124px; height: 124px; flex: none; object-fit: contain;
  background: #fff; border-radius: 50%; padding: 8px;
  box-shadow: 0 6px 18px rgba(0, 96, 128, .12);
}

/* Файлы турнира в кабинете: рядом с кнопкой — что происходит, ниже — что
   вышло. Человек видит, принят файл или нет, не дожидаясь сохранения. */
.fayl-turnira .sostoyanie { color: var(--tikhiy); font-size: 15px; }
.fayl-turnira .prosmotr { display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.fayl-turnira .prosmotr:empty { margin-top: 0; }
.fayl-turnira .prosmotr img {
  width: 72px; height: 72px; object-fit: contain;
  border: 1px solid #e2ecf2; border-radius: 12px; padding: 4px; background: #fff;
}
.fayl-turnira .ubrat-fayl {
  border: 1px solid #f0c3c1; background: #fff; color: var(--krasnyy);
  border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer;
}
.fayl-turnira .ubrat-fayl:hover { background: #fdeceb; }

.afisha .komu { margin: 0 0 26px; font-size: 18px; max-width: 42ch; }
.afisha .zakryto { margin: 0; font-size: 18px; font-weight: 500; }

/* Кнопка записи повторяет кнопку чата в шапке: на сайте центра действие
   выглядит одинаково, где бы оно ни стояло. */
.deystvie {
  display: inline-block; padding: 14px 28px; border: 0; border-radius: 11px;
  background: var(--indigo); color: #fff; text-decoration: none;
  font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 17px;
  line-height: 1.25; cursor: pointer;
}
.deystvie:hover { background: #2f2775; }
.deystvie:focus-visible { outline: 3px solid var(--biryuza); outline-offset: 3px; }
.deystvie:disabled { background: var(--tikhiy); cursor: default; }
/* Вторая кнопка — обводкой: на афише одно главное действие, и «описание»
   не должно выглядеть равным записи. */
.deystvie.tikhaya {
  background: transparent; color: var(--indigo);
  box-shadow: inset 0 0 0 2px var(--indigo); margin-left: 10px;
}
.deystvie.tikhaya:hover { background: rgba(60, 50, 140, .07); }
/* Та же кнопка вполголоса — для повтора над составом: действие то же, но
   спорить с афишей ему незачем. */
.deystvie.malaya { padding: 9px 18px; font-size: 15px; margin-left: 0; }

/* Заголовок состава и кнопка записи в одной строке; на узком экране кнопка
   уходит под заголовок, а не жмёт его в две строки. */
.shapka-sostava {
  display: flex; align-items: center; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 16px;
}
.shapka-sostava h2 { margin: 0; }
.razdel .pusto { margin: 0; }

/* Шахматная лента с главной — нижний край афиши. */
.afisha .lenta {
  height: 40px;
  background:
    repeating-linear-gradient(90deg, #fff 0 22px, transparent 22px 44px) 0 0 / 44px 22px,
    repeating-linear-gradient(90deg, transparent 0 22px, #fff 22px 44px) 0 22px / 44px 22px,
    var(--biryuza);
  background-repeat: repeat-x;
}

/* Подробности — белыми листами, как «слово тренера» на главной. */
.razdel {
  background: #fff; border: 1px solid #e2ecf2; border-radius: 20px;
  padding: 26px 30px; margin-top: 22px;
  box-shadow: 0 10px 30px rgba(0, 96, 128, .07);
}
.razdel h2 {
  margin: 0 0 16px;
  font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 20px;
  letter-spacing: -.01em; color: var(--indigo);
}
main { padding: 0 0 10px; }

.stroki > div { display: flex; justify-content: space-between; gap: 20px; padding: 11px 0; border-bottom: 1px solid #e2ecf2; }
.stroki > div:last-child { border-bottom: 0; padding-bottom: 0; }
.stroki > div:first-child { padding-top: 0; }
.stroki .chto { color: var(--tikhiy); white-space: nowrap; }
.stroki .skolko { font-weight: 500; text-align: right; }

.opisanie { max-width: 62ch; }
.opisanie img { max-width: 100%; }

/* Положение целиком — несколько экранов, и под ним теряется всё, что дальше.
   Показываем начало, остальное — по нажатию. Сделано переключателем, а не
   скриптом: текст на странице есть целиком с первой отрисовки, его находит
   поиск по странице и читает поисковик. */
.opisanie-svorot { position: relative; }
.opisanie-svorot .pereklyuchatel {
  position: absolute; width: 1px; height: 1px; opacity: 0; pointer-events: none;
}
.opisanie-svorot .opisanie {
  position: relative; max-height: 250px; overflow: hidden;
}
/* Растворение нижнего края: обрыв текста на полуслове читается как поломка,
   а растворение — как «здесь есть продолжение». */
.opisanie-svorot .opisanie::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 90px;
  background: linear-gradient(rgba(255, 255, 255, 0), #fff 85%);
  pointer-events: none;
}
.opisanie-svorot .razvernut {
  display: inline-block; margin-top: 14px; cursor: pointer;
  color: var(--indigo); font-weight: 500; border-bottom: 1px dashed currentColor;
}
.opisanie-svorot .razvernut::before { content: "Читать полностью"; }
.opisanie-svorot .pereklyuchatel:checked ~ .opisanie { max-height: none; }
.opisanie-svorot .pereklyuchatel:checked ~ .opisanie::after { content: none; }
.opisanie-svorot .pereklyuchatel:checked ~ .razvernut::before { content: "Свернуть"; }
.opisanie-svorot .pereklyuchatel:focus-visible ~ .razvernut {
  outline: 3px solid var(--biryuza); outline-offset: 3px;
}

.vest { padding: 14px 18px; border-radius: 12px; margin: 22px 0 0; }
.vest.horosho { background: #e7f7ee; color: #0a6b39; border-left: 4px solid var(--zelyonyy); }
.vest.ploho { background: #fdeceb; color: var(--krasnyy-temnyy); border-left: 4px solid var(--krasnyy); }
/* Резерв — не отказ: спокойная бирюза центра, а не красный цвет ошибки. */
.vest.rezerv { background: #e8f6fa; color: var(--indigo); border-left: 4px solid var(--biryuza); }
/* Галочка про день турнира стоит своей строкой перед кнопкой: она читается,
   а не проскакивается вместе с полями. */
.zapis .galka.den-turnira { display: flex; gap: 10px; align-items: flex-start; margin: 20px 0 0; font-size: 15px; line-height: 1.4; cursor: pointer; }
.zapis .galka.den-turnira input { width: auto; margin: 2px 0 0; }

/* Состав — та же таблица, что на боевой странице школы: тренеры и родители
   сверяют по ней, все ли свои на месте и кто внёс взнос. На узком экране
   едет вбок целиком, а не сжимается до нечитаемого. */
.podzagolovok { font-size: 15px; font-weight: 500; color: var(--tikhiy); margin: 20px 0 8px; }
.tablitsa { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.tablitsa table { border-collapse: collapse; width: 100%; font-size: 15px; white-space: nowrap; }
.tablitsa th { text-align: left; font-weight: 500; color: var(--tikhiy); padding: 9px 14px 9px 0; border-bottom: 2px solid #e2ecf2; }
.tablitsa td { padding: 11px 14px 11px 0; border-bottom: 1px solid #e2ecf2; vertical-align: middle; }
/* Публичный состав центрируем по горизонтали целиком: значения в нём короткие
   и разной длины — год, номер ФШР, отметка взноса, — и при выравнивании влево
   каждое висело у своего левого края, а подпись колонки стояла сама по себе.
   Кабинет этим правилом не задет: там в клетках телефоны и поля ввода. */
.tablitsa.sostav th, .tablitsa.sostav td { text-align: center; padding-left: 10px; padding-right: 10px; }
.tablitsa.sostav th:first-child, .tablitsa.sostav td:first-child { padding-left: 0; }
.tablitsa.sostav th:last-child, .tablitsa.sostav td:last-child { padding-right: 0; }
.tablitsa tr:last-child td { border-bottom: 0; }
.tablitsa td:nth-child(3) { font-weight: 500; white-space: normal; }

/* Взнос — отметкой: зелёная галочка либо красный крестик со ссылкой, по
   которой это исправляют. Цвета те же, что у звёзд на логотипе центра. */
.vznos .est { color: var(--zelyonyy); font-weight: 700; font-size: 18px; }
.vznos .oplatit {
  border: 1px solid var(--krasnyy); background: #fff; color: var(--krasnyy);
  border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 14px; font-weight: 500; cursor: pointer;
}
.vznos .oplatit:hover { background: #fdeceb; }
/* «Сняться с резерва» — не действие, а разговор: кнопка тише взноса и не
   красная, потому что ничего не ломает. */
.vznos .snyatsya {
  border: 1px solid #cfdde6; background: #fff; color: var(--tikhiy);
  border-radius: 9px; padding: 6px 12px; font: inherit; font-size: 14px; cursor: pointer;
}
.vznos .snyatsya:hover { background: #f2f7fa; }
.vznos .snyatsya:focus-visible { outline: 3px solid var(--biryuza); outline-offset: 3px; }

/* Нутро окна оплаты: QR для того, кто за компьютером, ссылка — для телефона. */
.nutro-oplaty { padding: 0 24px 4px; text-align: center; }
.nutro-oplaty img { width: 260px; height: 260px; margin: 6px auto 14px; display: block; }
.nutro-oplaty .deystvie { display: inline-block; }
/* Текст перевода читают и переписывают с него номер, поэтому он набран по
   левому краю и в размер основного текста, а не по центру, как QR. */
.nutro-oplaty .tekst-oplaty { text-align: left; white-space: pre-line; margin: 0 0 10px; }
.horosho-tekst { color: var(--zelyonyy); font-weight: 500; }
.ploho-tekst { color: var(--krasnyy); }
.vznos .oplatit:focus-visible { outline: 3px solid var(--biryuza); outline-offset: 3px; }

/* Запись — отдельная страница: на афише родитель решает, здесь заполняет. */
.zapis { background: #fff; border: 1px solid #e2ecf2; border-radius: 20px; padding: 30px 34px; margin-top: 26px; box-shadow: 0 10px 30px rgba(0, 96, 128, .07); }
.nazad-sverhu { margin: 0 0 12px; font-size: 15px; }
.zapis h1 { margin: 0 0 6px; font-family: 'Unbounded', sans-serif; font-weight: 700; font-size: 26px; letter-spacing: -.02em; color: var(--indigo); }
.zapis .nad { margin: 0 0 22px; color: var(--tikhiy); }
.zapis label { display: block; margin: 18px 0 7px; font-weight: 500; }
.zapis .nuzhno::after { content: " *"; color: var(--krasnyy); }
.zapis input[type=text], .zapis input[type=tel], .zapis input[type=date] {
  width: 100%; padding: 13px 14px; border: 1px solid #cfdbe6; border-radius: 11px;
  font: inherit; background: #fff; color: var(--ugol);
}
.zapis input:focus { outline: 2px solid var(--biryuza); border-color: var(--biryuza); }
.zapis .podskazka { font-size: 15px; color: var(--tikhiy); margin-top: 7px; }
/* Документы — своим листом: подсказка объясняет оба поля разом, и отдельно
   от них она висела ничьей строкой. */
.blok-dokumentov {
  margin-top: 20px; padding: 16px 18px 18px;
  background: #f7fbfd; border: 1px solid #e2ecf2; border-radius: 14px;
}
.blok-dokumentov .podskazka { margin: 0 0 4px; }
.blok-dokumentov label:first-of-type { margin-top: 10px; }

.zapis .para { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
/* Отступ достаётся только подписи самого поля. Прежний селектор цеплял и
   первую кнопку выбора пола — она тоже первый потомок своего блока, — и
   кнопки выходили разной высоты. */
.zapis .para > div > label:first-child { margin-top: 18px; }
.zapis .pol label { margin: 0; }
.zapis .pol { display: flex; gap: 12px; margin-top: 7px; align-items: stretch; }
.zapis .pol label { min-height: 52px; }
.zapis .pol label { flex: 1; margin: 0; padding: 13px; border: 1px solid #cfdbe6; border-radius: 11px; cursor: pointer; font-weight: 400; display: flex; align-items: center; justify-content: center; gap: 10px; }
.zapis .pol label:has(input:checked) { border-color: var(--indigo); box-shadow: inset 0 0 0 1px var(--indigo); font-weight: 500; }
.zapis .pol input { margin: 0; }
.zapis .pol .figurka { width: 22px; height: 26px; flex: none; display: block; align-self: center; }
.zapis .pol .muzh { color: var(--biryuza); }
.zapis .pol .zhen { color: var(--krasnyy); }
.zapis .galka { display: flex; align-items: center; gap: 9px; margin: 0; font-weight: 400; }
/* Подпись поля и галочка «ID ФШР ещё нет» — одной строкой: галочка про это
   поле, и решают «есть номер или нет» до того, как начнут его искать. */
.stroka-fshr { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin: 18px 0 7px; }
.stroka-fshr label { margin: 0; }

/* Выбор тренера: список и кнопка «Добавить» в строку, выбранные — бирками
   под ними. Тренеров у ребёнка бывает несколько, и каждый уходит своей
   строкой формы. */
.trener-stroka { display: flex; gap: 12px; align-items: stretch; margin-top: 7px; flex-wrap: wrap; }
.trener-stroka select {
  flex: 1 1 260px; padding: 13px 14px; border: 1px solid #cfdbe6; border-radius: 11px;
  font: inherit; background: #fff; color: var(--ugol);
}
.dobavit-trenera {
  border: 1px solid var(--indigo); background: #fff; color: var(--indigo);
  border-radius: 11px; padding: 12px 20px; font: inherit; font-weight: 500; cursor: pointer;
}
.dobavit-trenera:hover { background: rgba(60, 50, 140, .07); }
#drugoy-trener { margin-top: 10px; }
.vybrannye-trenery { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.vybrannye-trenery:empty { margin-top: 0; }
.vybrannye-trenery .trener {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--biryuza-svet); color: var(--indigo);
  border-radius: 999px; padding: 8px 8px 8px 14px; font-weight: 500;
}
.vybrannye-trenery .ubrat {
  border: 0; background: rgba(255, 255, 255, .7); color: var(--indigo);
  border-radius: 999px; width: 22px; height: 22px; line-height: 1; font-size: 16px; cursor: pointer;
}
.vybrannye-trenery .ubrat:hover { background: #fff; }
.zapis .galka input { width: auto; }
.zapis input:disabled { background: #f4f8fb; color: var(--tikhiy); }
.zapis .svorot { margin-top: 24px; border-top: 1px solid #e2ecf2; padding-top: 6px; }
.zapis .svorot summary { cursor: pointer; padding: 10px 0; color: var(--indigo); font-weight: 500; }
.kabinet .fayl, .zapis .fayl { margin-top: 7px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
/* Нативное поле файла подписано браузером по-английски и не поддаётся стилю,
   поэтому оно спрятано, а нажимают на свою подпись рядом. */
.kabinet .fayl input[type=file], .zapis .fayl input[type=file] { position: absolute; width: 1px; height: 1px; opacity: 0; }
.kabinet .knopka-fayla, .zapis .knopka-fayla {
  display: inline-block; margin: 0; padding: 11px 18px; border: 1px solid var(--indigo);
  border-radius: 11px; color: var(--indigo); font-weight: 500; cursor: pointer;
}
.kabinet .knopka-fayla:hover, .zapis .knopka-fayla:hover { background: rgba(60, 50, 140, .07); }
/* Поле выключено — и подпись рядом выглядит выключенной: иначе по ней жмут и
   не понимают, почему ничего не открывается. */
.zapis .fayl input[type=file]:disabled + .knopka-fayla {
  border-color: #d7e2ec; color: var(--tikhiy); cursor: default; background: #f4f8fb;
}
.zapis .fayl:has(input[type=file]:disabled) .imya-fayla { color: #a9bccb; }
.kabinet .fayl input[type=file]:focus-visible + .knopka-fayla, .zapis .fayl input[type=file]:focus-visible + .knopka-fayla { outline: 3px solid var(--biryuza); outline-offset: 3px; }
.kabinet .imya-fayla, .zapis .imya-fayla { color: var(--tikhiy); font-size: 15px; word-break: break-all; }
.zapis .knopki { margin-top: 28px; display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.zapis .nazad { color: var(--tikhiy); }

@media (max-width: 760px) {
  .afisha { margin-top: 18px; border-radius: 20px; }
  .afisha .nutro { padding: 28px 22px 26px; }
  .razdel { padding: 22px 20px; border-radius: 16px; }
  .zapis { padding: 24px 20px; border-radius: 16px; }
  .deystvie { display: block; text-align: center; }
  .deystvie.tikhaya { margin-left: 0; margin-top: 10px; }
  .stroki > div { flex-direction: column; gap: 2px; }
  .stroki .skolko { text-align: left; }
  .afisha .lenta {
    height: 32px;
    background:
      repeating-linear-gradient(90deg, #fff 0 16px, transparent 16px 32px) 0 0 / 32px 16px,
      repeating-linear-gradient(90deg, transparent 0 16px, #fff 16px 32px) 0 16px / 32px 16px,
      var(--biryuza);
    background-repeat: repeat-x;
  }
}

/* Дверь — узкий лист: на странице одно дело, и растягивать поля логина во всю
   ширину незачем. Лист стоит по середине колонки: прижатый к левому краю, он
   читался как незагруженная страница. */
.dver { max-width: 420px; margin-inline: auto; }
.dver input[type=password] {
  width: 100%; padding: 13px 14px; border: 1px solid #cfdbe6; border-radius: 11px;
  font: inherit; background: #fff; color: var(--ugol);
}
.dver input[type=password]:focus { outline: 2px solid var(--biryuza); border-color: var(--biryuza); }
.dver .podskazka { margin-top: 22px; padding-top: 16px; border-top: 1px solid #e2ecf2; }

/* Полоса вошедшего организатора. Тихая и служебная: она про работу, а не про
   турнир, и спорить с афишей ей нечем. Родитель её не видит вовсе. */
.sluzhebnaya {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 18px; padding: 12px 18px;
  background: #eef4f9; border: 1px solid #dbe7f1; border-radius: 12px;
  font-size: 15px;
}
.sluzhebnaya .kto { color: var(--tikhiy); }
.sluzhebnaya .knopki-vedeniya { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; }
.sluzhebnaya form { display: inline; }
.sluzhebnaya button {
  border: 0; background: none; padding: 0; font: inherit; font-weight: 500;
  color: var(--krasnyy); cursor: pointer; text-decoration: underline;
  text-underline-offset: 3px;
}
.sluzhebnaya a { color: var(--indigo); font-weight: 500; }
.sluzhebnaya a:focus-visible { outline: 3px solid var(--biryuza); outline-offset: 3px; }

/* ——— Кабинет организатора ———————————————————————————————————————————
   Рабочее место на сайте центра: те же цвета и та же шапка, что у родителя,
   только содержимое служебное. Плотных таблиц общей админки здесь нет —
   турниров у центра единицы, и список читается как список, а не как отчёт. */

/* Рабочее место шире сайта: у родителя колонка в 940 точек читается лучше,
   а в составе девять колонок, и в узком поле кнопки действий уезжали за край
   даже на большом экране. */
body:has(.kabinet) main.obyom { max-width: 1280px; }
.kabinet { padding: 26px 0 10px; }
.kabinet .sluzhebnaya { margin: 0 0 20px; }

.shapka-raboty { display: flex; align-items: baseline; justify-content: space-between; gap: 18px; flex-wrap: wrap; }
.shapka-raboty h1 {
  margin: 0; font-family: 'Unbounded', sans-serif; font-weight: 700;
  font-size: 28px; letter-spacing: -.02em; color: var(--indigo);
}
.kto-vy { color: var(--tikhiy); font-size: 15px; }

.polka { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 22px 0 18px; }
.otbor { display: flex; align-items: center; gap: 10px; }
/* Подпись отбора — без общего отступа подписей формы и без своей высоты
   строки: с ними «Показать» съезжало вниз и висело ниже поля. */
.kabinet .otbor label {
  color: var(--tikhiy); margin: 0; display: flex; align-items: center; line-height: 1;
}
.otbor select {
  padding: 10px 12px; border: 1px solid #cfdbe6; border-radius: 11px;
  font: inherit; background: #fff; color: var(--ugol);
}

.turniry { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.turniry li {
  background: #fff; border: 1px solid #e2ecf2; border-radius: 16px; padding: 18px 22px;
  box-shadow: 0 10px 30px rgba(0, 96, 128, .07);
}
.turniry .nazvanie { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.turniry .nazvanie a {
  font-family: 'Unbounded', sans-serif; font-weight: 500; font-size: 18px;
  letter-spacing: -.01em; color: var(--indigo); text-decoration: none;
}
.turniry .nazvanie a:hover { text-decoration: underline; }

/* Состояние турнира — словом и цветом: «идёт» и «завершён» перепутать нельзя. */
.sostoyanie { font-size: 13px; font-weight: 500; padding: 3px 10px; border-radius: 999px; background: #eef4f9; color: var(--tikhiy); }
.sostoyanie-pre_registration { background: #e0f6ea; color: #0a6b39; }
.sostoyanie-goes { background: #fff4d6; color: #8a6100; }
.sostoyanie-canceled { background: #fdeceb; color: var(--krasnyy-temnyy); }

.turniry .podrobnosti { margin-top: 6px; color: var(--tikhiy); font-size: 15px; }
.turniry .lyudi { margin-top: 12px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 15px; }
.turniry .lyudi .skolko { font-weight: 600; font-size: 17px; }
.turniry .lyudi .vznos { color: var(--zelyonyy); }
.turniry .lyudi .chto { color: var(--tikhiy); margin-right: 10px; }
.turniry .na-sayte { display: inline-block; margin-top: 10px; font-size: 15px; }

.listanie { margin-top: 20px; display: flex; gap: 20px; }
.pusto { color: var(--tikhiy); }

@media (max-width: 620px) {
  .polka { flex-direction: column; align-items: stretch; }
  .polka .deystvie { width: 100%; }
  .otbor select { flex: 1; }
}

/* Карточка турнира в кабинете. Поля сгруппированы по смыслу и подписаны
   по-человечески: организатор заводит турнир раз в месяц и не обязан помнить,
   чем «основная регистрация» отличается от «предварительной». */
.nazad-k { margin: 0 0 14px; font-size: 15px; }
.rabota .list, .kabinet .list {
  background: #fff; border: 1px solid #e2ecf2; border-radius: 16px;
  padding: 22px 26px; margin-bottom: 16px;
  box-shadow: 0 10px 30px rgba(0, 96, 128, .07);
}
.kabinet h2 {
  margin: 0 0 6px; font-family: 'Unbounded', sans-serif; font-weight: 500;
  font-size: 19px; letter-spacing: -.01em; color: var(--indigo);
}
.kabinet label { display: block; margin: 16px 0 6px; font-weight: 500; }
.kabinet label.nuzhno::after { content: " *"; color: var(--krasnyy); }
.kabinet input[type=text], .kabinet input[type=date], .kabinet input[type=datetime-local],
.kabinet select, .kabinet textarea {
  width: 100%; padding: 12px 13px; border: 1px solid #cfdbe6; border-radius: 11px;
  font: inherit; background: #fff; color: var(--ugol);
}
.kabinet textarea { resize: vertical; line-height: 1.5; }
.kabinet input:focus, .kabinet select:focus, .kabinet textarea:focus {
  outline: 2px solid var(--biryuza); border-color: var(--biryuza);
}
/* Тихая строка под заголовком состава: счёт неоплаченных мест не должен
   спорить с самим заголовком. */
.shapka-sostava .schyot { display: flex; flex-direction: column; gap: 4px; }
.schyot-mest { margin: 0; color: var(--tikhiy); font-size: 15px; }
/* «Мест нет» — не отказ и не беда, поэтому не красным: строка объясняет, что
   запись всё равно принимается, просто в очередь. */
.mest-net { margin: 6px 0 0; color: var(--indigo); font-size: 15px; font-weight: 500; }
.kabinet .schyot-neoplativshih { margin: -8px 0 14px; color: var(--tikhiy); font-size: 15px; }
/* Отметка очереди в строке состава: организатор ведёт список глазами, и
   «в резерве» должно читаться, не сливаясь со словом «не внесён». */
.kabinet .metka-rezerv {
  display: inline-block; margin-left: 8px; padding: 2px 8px; border-radius: 8px;
  background: #e8f6fa; color: var(--indigo); font-size: 13px; white-space: nowrap;
}
.kabinet .obnovit-reytingi { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 14px; }
.kabinet .obnovit-reytingi .dim { color: var(--tikhiy); font-size: 14px; }
.kabinet .para { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
/* Минуты и добавление — одно поле контроля, разнесённое на два числа:
   стоят парой под своим селектом, а не разъезжаются по колонкам формы. */
.kabinet .kontrol-para { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 12px; }
.kabinet .kontrol-para label { margin-top: 0; }
.kabinet .podskazka { font-size: 14px; color: var(--tikhiy); margin-top: 6px; }
/* Подсказка внутри поля — заметно тише значения. Браузерный серый по
   умолчанию здесь читался как уже введённый текст: пустое поле выглядело
   заполненным, и человек не понимал, его там имя стоит или наш пример. */
.kabinet input::placeholder, .kabinet textarea::placeholder { color: var(--tikhiy); opacity: .55; }
/* Готовые ссылки под полем — те же тихие строки, что подсказка, но с запасом
   сверху: рядом стоят кнопки «скопировать», и строка не липнет к тексту. */
.kabinet .ssylka-sluzhebnaya { font-size: 14px; color: var(--tikhiy); margin-top: 8px; }
.kabinet .ssylka-sluzhebnaya a { color: var(--indigo); }
/* Собранный адрес — строкой над окошком, вплотную к нему: человек видит, что
   набирает, прямо там, где набирает, и копирует одной кнопкой. */
.kabinet .adres-sobran { margin: 0 0 7px; font-size: 14px; color: var(--tikhiy); }
.kabinet .adres-sobran a { color: var(--indigo); word-break: break-all; }
/* Ответ о занятости имени. Зелёного и красного в оформлении центра нет, и
   заводить их ради двух слов незачем: свободное имя говорит тихо, занятое —
   цветом отказа, тем же, которым помечено обязательное поле. */
.kabinet .imya-otvet:empty { display: none; }
.kabinet .imya-otvet { margin-top: 6px; font-size: 14px; color: var(--tikhiy); }
.kabinet .imya-otvet.zanyato { color: var(--krasnyy); }
.kabinet .galka { display: flex; align-items: center; gap: 9px; font-weight: 400; }
.kabinet .galka input { width: auto; }
.kabinet .svorot { margin-top: 18px; border-top: 1px solid #e2ecf2; padding-top: 6px; }

/* Блок, который сворачивается целиком: заголовок работает переключателем, а
   внутри уже ничего не прячется. */
.kabinet .svorot-blok > summary { cursor: pointer; list-style: none; display: flex; align-items: center; gap: 10px; }
.kabinet .svorot-blok > summary::-webkit-details-marker { display: none; }
.kabinet .svorot-blok > summary::before {
  content: "▸"; color: var(--indigo); font-size: 16px; line-height: 1;
}
.kabinet .svorot-blok[open] > summary::before { content: "▾"; }
.kabinet .svorot-blok > summary h2 { margin: 0; }
.kabinet .svorot summary { cursor: pointer; padding: 10px 0; color: var(--indigo); font-weight: 500; }
.kabinet .knopki { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; margin-top: 20px; }
/* Сохранение слева, удаление — у правого края: рядом по ним промахиваются,
   а тихая строка в углу не мозолит глаза. */
.kabinet .knopki-sverhu { margin: 18px 0 20px; justify-content: space-between; }
/* «Сохранить» и «Дублировать» держатся вместе слева, удаление остаётся у
   правого края: рядом по ним промахиваются. */
.kabinet .knopki-sverhu .deystvie.tikhaya { margin-right: auto; }
.kabinet .na-sayte { font-size: 15px; }

/* Красный — цвет логотипа, и на главной им набраны две-три ссылки. В рабочих
   местах ссылок десятки, и красными они читаются как ошибки. */
/* Кнопки сюда не попадают: у «Завести турнир» текст белый по индиго, и
   перекраска делала надпись невидимой. */
.kabinet a:not(.deystvie), .zapis a:not(.deystvie), .tablitsa a { color: var(--indigo); }
.kabinet .opasno, .zapis .vznos .oplatit { color: var(--krasnyy); }

/* Окно вопроса перед действием. Порядок и вид те же, что на боевом сайте
   школы: заголовок с чертой под ним, в теле — о ком речь, внизу справа
   зелёное «Подтвердить» и тёмное «Закрыть». Браузерное confirm не годится:
   в нём не видно имени, а кнопки в строке стоят вплотную. */
.okno-voprosa {
  position: fixed; inset: 0; z-index: 50; display: flex; align-items: center; justify-content: center;
  padding: 20px; background: rgba(34, 48, 74, .45);
}
.okno-voprosa[hidden] { display: none; }
.okno-voprosa .listok {
  background: #fff; border-radius: 10px; max-width: 520px; width: 100%; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0, 46, 70, .28);
}
.okno-voprosa h3 {
  margin: 0; padding: 18px 24px; border-bottom: 1px solid #e2ecf2;
  font-family: 'Golos Text', sans-serif; font-weight: 600; font-size: 16px;
  line-height: 1.35; color: var(--ugol);
}
.okno-voprosa p { margin: 0; padding: 20px 24px; color: var(--ugol); }
.okno-voprosa p[hidden] { display: none; }
.okno-voprosa .knopki {
  margin: 0; padding: 14px 24px; border-top: 1px solid #e2ecf2;
  display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap;
}
.okno-voprosa .knopki button {
  border: 0; border-radius: 8px; padding: 11px 20px; font: inherit; font-weight: 600;
  color: #fff; cursor: pointer;
}
.okno-voprosa .da { background: var(--zelyonyy); }
.okno-voprosa .da:hover { background: #00803c; }
/* Вторая дорога того же действия — та же кнопка, но не главная: выбор
   «весь список / только основной» равноправен, а зелёных кнопок в окне
   должно быть не две. */
.okno-voprosa .da.vtoraya { background: #fff; color: var(--zelyonyy); border: 1px solid var(--zelyonyy); }
.okno-voprosa .da.vtoraya:hover { background: #eaf7ef; }
.okno-voprosa .net { background: var(--ugol); }
.okno-voprosa .net:hover { background: #121c2e; }

/* Состав: действия построчно, таблица едет вбок на узком экране. */
.polka-sostava { display: flex; gap: 12px; flex-wrap: wrap; margin: 14px 0 6px; }
.skopom-knopki { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin: 18px 0 6px; color: var(--tikhiy); font-size: 15px; }
.skopom-knopki button, .deystviya button {
  border: 1px solid #cfdbe6; background: #fff; color: var(--indigo);
  border-radius: 9px; padding: 7px 12px; font: inherit; font-size: 14px; cursor: pointer;
}
.skopom-knopki button:hover, .deystviya button:hover { border-color: var(--indigo); }
.skopom-knopki .opasno, .deystviya .opasno { color: var(--krasnyy); }
.skopom-knopki .opasno:hover, .deystviya .opasno:hover { border-color: var(--krasnyy); }
.deystviya { display: flex; gap: 8px; align-items: center; }
/* «Править» — ссылка, но в ряду кнопок и выглядит как кнопка: разнобой в
   одном ряду читается как случайность. */
.deystviya .knopka-ssylka {
  border: 1px solid #cfdbe6; border-radius: 9px; padding: 7px 12px;
  font-size: 14px; color: var(--indigo); text-decoration: none; white-space: nowrap;
}
.deystviya .knopka-ssylka:hover { border-color: var(--indigo); }
.skopirovat {
  border: 1px solid #cfdbe6; background: #fff; color: var(--indigo);
  border-radius: 8px; padding: 4px 10px; margin-left: 8px; font: inherit; font-size: 14px; cursor: pointer;
}
.skopirovat:hover { border-color: var(--indigo); }
.udalenie { margin: 4px 0 0; }
/* Удаление — кнопка, но серая: по ссылке в строке промахиваются мимо, а
   кричать о редком действии незачем. */
.tihoe-udalenie {
  border: 1px solid #dbe4ec; background: #eef3f7; color: #5d6b7a;
  border-radius: 11px; padding: 13px 24px; font: inherit; font-weight: 500; cursor: pointer;
}
.tihoe-udalenie:hover { background: #e3eaf1; color: var(--krasnyy); border-color: #d2c0c0; }
.deystviya form { display: inline; }
.kabinet .tablitsa td.imya { font-weight: 500; white-space: normal; }
.kabinet .tablitsa .telefon { display: block; color: var(--tikhiy); font-size: 14px; }
.kabinet .tablitsa .kogda-vznos { color: var(--tikhiy); font-size: 14px; }
.kabinet .tablitsa input[type=checkbox] { width: auto; }
.kabinet .zapisat form { margin-top: 4px; }

@media (max-width: 620px) {
  .kabinet .para { grid-template-columns: 1fr; }
  .rabota .list, .kabinet .list { padding: 18px 16px; border-radius: 14px; }
}

/* Ниже этой ширины таблица состава в поле не помещается никак — показываем
   карточками. Порог выбран по самой таблице, а не по «телефону»: на узком
   окне ноутбука кнопки уезжали так же, как на телефоне. */
@media (max-width: 1000px) {
  /* Состав — карточками, а не таблицей: колонок девять, и кнопки «отметить
     взнос» и «снять заявку» оказывались за краем. */
  .kabinet .tablitsa table.sostav,
  .kabinet .tablitsa table.sostav tbody,
  .kabinet .tablitsa table.sostav tr,
  .kabinet .tablitsa table.sostav td { display: block; width: 100%; }
  .kabinet .tablitsa table.sostav thead { display: none; }
  .kabinet .tablitsa table.sostav tr {
    border: 1px solid #e2ecf2; border-radius: 14px; padding: 12px 14px; margin-bottom: 12px;
  }
  .kabinet .tablitsa table.sostav td {
    border: 0; padding: 4px 0; white-space: normal;
    display: flex; justify-content: space-between; gap: 14px;
  }
  .kabinet .tablitsa table.sostav td::before {
    content: attr(data-chto); color: var(--tikhiy); font-size: 14px;
  }
  .kabinet .tablitsa table.sostav td.imya { font-size: 17px; }
  .kabinet .tablitsa table.sostav td.deystviya { display: flex; flex-wrap: wrap; padding-top: 10px; }
  .kabinet .tablitsa table.sostav td.deystviya::before { content: none; }
  .kabinet .tablitsa .telefon { display: inline; }

  /* Опасное действие уезжает в свою строку: рядом с «снять отметку» по нему
     промахиваются. */
  .skopom-knopki { align-items: stretch; flex-direction: column; }
  .skopom-knopki .opasno { margin-top: 6px; }
}

.kabinet .uzkiy { max-width: 460px; margin-inline: auto; }
.kabinet input[type=password] {
  width: 100%; padding: 12px 13px; border: 1px solid #cfdbe6; border-radius: 11px;
  font: inherit; background: #fff; color: var(--ugol);
}
.kabinet input[type=password]:focus { outline: 2px solid var(--biryuza); border-color: var(--biryuza); }

/* На телефоне два поля в ряд не помещаются: колонка уже, чем кнопки выбора
   пола. Правило идёт последним — иначе его перебивает основное. */
@media (max-width: 620px) {
  .zapis .para { grid-template-columns: 1fr; gap: 0; }
}

@media (max-width: 620px) {
  .zagolovok-afishi { flex-direction: column; align-items: flex-start; gap: 12px; }
  /* На узком экране логотип уезжает над названием, и места под него больше,
     чем в строке: мельчить здесь не из-за чего. */
  .logotip-turnira { width: 104px; height: 104px; }
}

/* Условия, которые заполняют не всегда: под спойлером, чтобы три главные
   строки — когда, где и какой контроль — не тонули в списке из десяти.

   Раскрытый спойлер — приложение к блоку, а не его продолжение. Раньше его
   строки вставали в общий столбец наравне с главными: «Первый тур» под
   спойлером выглядел ровно как «Начало» над ним, а границы между блоками
   съедались — соседние строки слипались. Поэтому содержимое уходит вбок за
   черту и набрано тише: видно, что это отступление, и видно, где оно
   кончилось. */
.podrobnosti-turnira { margin: 14px 0; border-top: 1px solid #e2ecf2; padding-top: 4px; }
.podrobnosti-turnira:last-child { margin-bottom: 0; }
/* Заголовок спойлера набран тише строк самого блока: он ведёт к подробностям,
   а индиго и полужирный делали его главнее «Начала» и «Адреса», ради которых
   страницу открывают. Цвет берёт на себя только под указателем — чтобы было
   видно, что по нему жмут. */
.podrobnosti-turnira > summary {
  cursor: pointer; padding: 10px 0; color: var(--tikhiy); font-weight: 400;
  list-style: none; display: flex; align-items: center; gap: 10px;
}
.podrobnosti-turnira > summary:hover { color: var(--indigo); }
.podrobnosti-turnira > summary::-webkit-details-marker { display: none; }
.podrobnosti-turnira > summary::before { content: "▸"; font-size: 13px; line-height: 1; opacity: .7; }
.podrobnosti-turnira[open] > summary::before { content: "▾"; }
.podrobnosti-turnira[open] > summary { margin-bottom: 2px; }
.podrobnosti-turnira .stroki {
  margin: 0 0 8px 3px; padding-left: 17px; border-left: 2px solid #dbe9f2;
}
.podrobnosti-turnira .stroki > div { padding: 8px 0; font-size: 15px; border-bottom: 0; }
.podrobnosti-turnira .stroki > div + div { border-top: 1px solid #eef4f8; }
.podrobnosti-turnira .stroki > div:first-child { padding-top: 2px; }
.podrobnosti-turnira .stroki > div:last-child { padding-bottom: 2px; }

/* Разметка описания турнира: вкладки, панель кнопок и предпросмотр.

   Вкладки стоят над полем, панель — под ними: сначала человек решает, пишет
   он или смотрит, и только потом берётся за знаки. Предпросмотр занимает
   место поля, а не встаёт рядом: на ширине формы два столбца дали бы по
   тридцать знаков в строке, и читать стало бы нечего. */
.kabinet .razmetka { border: 1px solid #cfdbe6; border-radius: 11px; overflow: hidden; background: #fff; }
.kabinet .vkladki-razmetki { display: flex; gap: 2px; background: #f2f7fb; border-bottom: 1px solid #e2ecf2; }
.kabinet .vkladka {
  border: 0; background: transparent; cursor: pointer; font: inherit; font-size: 15px;
  padding: 10px 16px; color: var(--tikhiy);
}
.kabinet .vkladka.vybrana { background: #fff; color: var(--indigo); font-weight: 500; }
.kabinet .panel-razmetki {
  display: flex; flex-wrap: wrap; gap: 6px; padding: 8px 10px;
  border-bottom: 1px solid #eef4f8;
}
.kabinet .panel-razmetki button {
  border: 1px solid #dbe9f2; background: #fff; border-radius: 8px; cursor: pointer;
  font: inherit; font-size: 14px; line-height: 1; padding: 7px 10px; color: var(--ugol);
}
.kabinet .panel-razmetki button:hover { background: #f2f7fb; border-color: #bdd3e4; }
/* Поле внутри коробки своей рамки не имеет: рамка одна, у коробки. */
.kabinet .razmetka textarea {
  border: 0; border-radius: 0; width: 100%; display: block;
}
.kabinet .razmetka textarea:focus { outline: 0; }
.kabinet .predprosmotr { padding: 16px 18px; min-height: 260px; }
.kabinet .predprosmotr .pusto { color: var(--tikhiy); margin: 0; }

/* Ссылка внутри окна вопроса: тихая, под текстом, над кнопками. */
.okno-voprosa .ssylka-v-okne { margin: 6px 0 0; }
.okno-voprosa .ssylka-v-okne a { color: var(--tikhiy); font-size: 14px; text-decoration: underline; }
.okno-voprosa .ssylka-v-okne a:hover { color: inherit; }

/* Пояснение в окне вопроса: абзацами и тише заголовка. */
#vopros-poyasnenie { margin: 8px 0 0; }
#vopros-poyasnenie p { margin: 0 0 8px; font-size: 15px; line-height: 1.45; }
#vopros-poyasnenie p:last-child { margin-bottom: 0; }

/* Переспрос о склейке дубля в правке участника: вопрос и кнопка в одной плашке. */
.vest.skleyka p { margin: 0 0 10px; }
.vest.skleyka .deystvie { margin-top: 4px; }

/* Цвета текста в описании — палитра разметки (`markup.CVETA`). */
.opisanie .krasnyy { color: #db2828; }
.opisanie .siniy { color: #2185d0; }
.opisanie .zelyonyy { color: #21ba45; }
.opisanie .oranzhevyy { color: #f2711c; }

/* Красивая ссылка: начало адреса приклеено к полю неизменяемой частью. */
.kabinet .adres-sobran { display: flex; align-items: center; gap: 8px; margin: 0; font-size: inherit; color: inherit; }
.kabinet .pole-ssylki {
  flex: 1; min-width: 0; display: flex; align-items: center; background: #fff;
  border: 1px solid #cfdbe6; border-radius: 11px;
}
.kabinet .pole-ssylki:focus-within { outline: 2px solid var(--indigo); border-color: var(--indigo); }
.kabinet .nachalo-adresa { padding-left: 13px; color: var(--tikhiy); white-space: nowrap; }
.kabinet .pole-ssylki input[type=text] { border: 0; padding-left: 0; min-width: 0; flex: 1; background: transparent; }
.kabinet .pole-ssylki input[type=text]:focus { outline: 0; }
.kabinet .adres-sobran .skopirovat { margin-left: 0; white-space: nowrap; }
.vh { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }