/*
  Знание — приём.

  Форма как печатный документ, а не как стопка серых коробок. То, что она
  заменяет, — бланк на три страницы, который печатают и заполняют от руки.
  Отсюда язык: тонкие линейки, подчёркнутые поля вместо рамок, нумерованные
  разделы, номер заявки набранный табличными цифрами.

  Цвета сняты с логотипа школы, шрифты — PT Serif и PT Sans, спроектированные
  под кириллицу. Шрифты лежат у нас, не у Google: форму заполняют родители,
  и их IP незачем отдавать третьей стороне.
*/

/* Начертания подключаются в fonts.css — он генерируется скриптом
   и разбит по subset'ам, чтобы кириллица и латиница грузились раздельно. */

/* Токены и начертания — в tokens.css и fonts.css, подключаются раньше. */

/* ---------- основа ---------- */

*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;
  font-family:var(--sans);
  font-size:var(--t-md);
  line-height:1.6;
  color:var(--ink);
  background:var(--ground);
  -webkit-font-smoothing:antialiased;
  /* Тонкая сетка на фоне: документ лежит на разлинованном столе. */
  background-image:linear-gradient(var(--hair) 1px, transparent 1px);
  background-size:100% 2.4rem;
;
  /* Цифры одной ширины по всему проекту. Их выравнивают в столбцы
     на два десятка экранов — списки, даты, суммы, счётчики, — и раньше
     это писалось поштучно в двадцати семи местах, а в десяти забывалось.
     Onest умеет табличные цифры; для обычного текста разницы нет. */
  font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

.skip{
  position:absolute;left:-999px;top:0;z-index:99;
  background:var(--chip-bg);color:var(--chip-fg);padding:.6rem 1rem;
}
.skip:focus{left:0}

:where(a){color:var(--navy)}
:where(a):hover{color:var(--navy-deep)}
:focus-visible{outline:2px solid var(--navy);outline-offset:2px;border-radius:var(--r-sm)}

/* ---------- шапка ---------- */

.masthead{
  max-width:var(--doc);margin:0 auto;padding:1.4rem 1.25rem .9rem;
  display:flex;align-items:center;gap:1rem;justify-content:space-between;
}
.brand{display:flex;align-items:center;gap:.7rem;text-decoration:none;color:inherit}
.brand__mark{display:block;width:44px;height:auto}
.brand__text{display:flex;flex-direction:column;line-height:1.2}
.brand__text b{font-family:var(--display);font-size:var(--t-md);letter-spacing:.01em}
.brand__text i{font-style:normal;font-size:var(--t-xs);color:var(--muted);letter-spacing:.02em}

.theme-toggle{
  font:inherit;font-size:var(--t-md);line-height:1;
  background:none;border:1px solid var(--edge);color:var(--muted);
  min-width:44px;min-height:44px;border-radius:var(--r-sm);cursor:pointer;
}
.theme-toggle:hover{border-color:var(--navy);color:var(--navy)}

/* ---------- документ ---------- */

.doc{
  max-width:var(--doc);margin:0 auto 3rem;
  background:var(--paper);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);
  overflow:hidden;
}

/* Шапка документа: единственное место, где цвет берёт весь разворот. */
.doc__head{
  background:var(--head-bg);color:var(--head-fg);
  padding:2.2rem 1.75rem 1.9rem;
  position:relative;
}
.doc__head::after{
  /* Три полосы — паруса с логотипа. Единственная декоративная деталь. */
  content:"";position:absolute;left:0;right:0;bottom:0;height:3px;
  background:linear-gradient(90deg,var(--rail-fg) 0 33.33%,var(--blue) 33.33% 66.66%,var(--bad) 66.66%);
}
.doc__kicker{
  margin:0 0 .5rem;font-size:var(--t-xs);text-transform:uppercase;
  letter-spacing:.2em;color:var(--head-dim);
}
.doc__title{
  font-family:var(--display);font-weight:700;
  font-size:var(--t-hero);
  line-height:1.1;letter-spacing:-.015em;margin:0;text-wrap:balance;
}
.doc__lede{
  margin:.85rem 0 0;max-width:38ch;color:var(--head-dim);font-size:var(--t-base);line-height:1.55;
}
.doc__meta{
  margin:1.3rem 0 0;padding-top:1rem;border-top:1px solid color-mix(in srgb, var(--head-fg) 20%, transparent);
  display:flex;flex-wrap:wrap;gap:.4rem 1.6rem;
  font-size:var(--t-sm);color:var(--head-dim);
}
.doc__meta b{color:var(--head-fg);font-weight:700}

.doc__body{padding:0 1.75rem 2rem}

@media(max-width:560px){
  .doc__head{padding:1.7rem 1.15rem 1.5rem}
  .doc__body{padding:0 1.15rem 1.5rem}
  body{background-size:100% 2rem}
}

/* ---------- разделы ---------- */

.sec{padding:2.1rem 0 .4rem;border-bottom:1px solid var(--hair)}
.sec:last-of-type{border-bottom:0}
.sec__head{display:flex;align-items:baseline;gap:.75rem;margin:0 0 .35rem}
.sec__n{
  flex:none;font-family:var(--sans);font-size:var(--t-xs);font-weight:700;
  letter-spacing:.06em;color:var(--chip-fg);background:var(--chip-bg);
  min-width:1.55rem;height:1.55rem;border-radius:var(--r-pill);
  display:inline-flex;align-items:center;justify-content:center;
  position:relative;top:-.1rem;font-variant-numeric:tabular-nums;
}
.sec__t{font-family:var(--display);font-weight:700;font-size:var(--t-lg);line-height:1.25;margin:0;text-wrap:balance}
.sec__hint{margin:.1rem 0 1.3rem 2.3rem;color:var(--muted);font-size:var(--t-base);max-width:52ch}
@media(max-width:560px){.sec__hint{margin-left:0}}

/* ---------- поля ---------- */

.grid{display:grid;gap:.35rem 1.5rem;grid-template-columns:1fr 1fr}
.grid--1{grid-template-columns:1fr}
.grid > .col-2{grid-column:1/-1}
@media(max-width:560px){.grid{grid-template-columns:1fr}}

.field{position:relative;padding:1.15rem 0 1.35rem}

.field input[type=text],
.field input[type=email],
.field input[type=tel],
.field input[type=date],
.field select,
.field textarea{
  width:100%;font:inherit;color:var(--ink);
  background:transparent;
  border:0;border-bottom:1px solid var(--edge);
  border-radius:0;padding:.4rem 0 .45rem;
  transition:border-color .15s, box-shadow .15s;
  appearance:none;
}
.field textarea{resize:vertical;min-height:3.4rem;line-height:1.5}
.field select{
  background-image:linear-gradient(45deg,transparent 50%,var(--muted) 50%),
                   linear-gradient(135deg,var(--muted) 50%,transparent 50%);
  background-position:calc(100% - 11px) calc(50% + 1px), calc(100% - 6px) calc(50% + 1px);
  background-size:5px 5px,5px 5px;background-repeat:no-repeat;padding-right:1.6rem;
  cursor:pointer;
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:none;border-bottom-color:var(--navy);box-shadow:0 1px 0 0 var(--navy);
}

/* Плавающая подпись: пока поле пустое, она стоит на строке. */
.field > label{
  position:absolute;left:0;top:1.55rem;
  color:var(--muted);font-size:var(--t-md);pointer-events:none;
  transition:transform .16s ease, font-size .16s ease, color .16s ease;
  transform-origin:0 0;
}
.field input:focus ~ label,
.field textarea:focus ~ label,
.field input:not(:placeholder-shown) ~ label,
.field textarea:not(:placeholder-shown) ~ label,
.field--static > label{
  /* Подпись поля без капслока: «Кем приходится» и «Дата рождения» —
     фразы, а не метки в одно слово. Форму заполняют родители с телефона,
     и лишняя доля секунды на каждой подписи здесь дороже, чем стиль. */
  transform:translateY(-1.45rem);font-size:var(--t-xs);letter-spacing:0;
  color:var(--muted);
}
.field input:focus ~ label,.field textarea:focus ~ label{color:var(--navy)}

.field--static{padding-top:1.15rem}
.field .help{display:block;margin-top:.4rem;font-size:var(--t-sm);color:var(--faint);line-height:1.45}
/* Без .field в селекторе: «выберите филиал» и «поставьте галочку
   согласия» выводятся ВНЕ поля и до этой правки рисовались обычным
   серым текстом — неотличимо от подсказки. Это две самые частые
   ошибки, на которые натыкается родитель. */
.err{display:block;margin-top:.4rem;font-size:var(--t-sm);color:var(--bad-ink);font-weight:700}
.field.has-error input,.field.has-error select,.field.has-error textarea{border-bottom-color:var(--bad)}
.req{color:var(--bad-ink)}

/* ---------- выбор филиала ---------- */

.branches{display:grid;gap:.6rem;margin:0 0 .6rem}
.branch{
  display:block;position:relative;cursor:pointer;
  border:1px solid var(--edge);border-radius:var(--r);
  padding:.9rem 1rem .9rem 2.6rem;
  transition:border-color .14s, background .14s;
}
.branch:hover{border-color:var(--blue);background:var(--wash)}
.branch input{position:absolute;opacity:0;width:0;height:0}
.branch::before{
  content:"";position:absolute;left:1rem;top:1.15rem;
  width:.85rem;height:.85rem;border:1px solid var(--faint);border-radius:50%;
  transition:border-color .14s, box-shadow .14s;
}
.branch:has(input:checked){border-color:var(--navy);background:var(--wash)}
.branch:has(input:checked)::before{
  border-color:var(--navy);border-width:2px;
  box-shadow:inset 0 0 0 2px var(--paper), inset 0 0 0 1rem var(--navy);
}
.branch:has(input:focus-visible){outline:2px solid var(--navy);outline-offset:2px}
.branch__n{
  display:block;font-family:var(--display);font-weight:700;font-size:var(--t-md);line-height:1.25;
}
.branch__v{display:block;font-size:var(--t-base);color:var(--muted);margin-top:.1rem}
.branch__w{
  display:inline-block;margin-top:.35rem;font-size:var(--t-xs);font-weight:700;
  letter-spacing:.04em;color:var(--navy);font-variant-numeric:tabular-nums;
}

/* ---------- дети ---------- */

.child{
  border:1px solid var(--hair);border-left:3px solid var(--blue);
  border-radius:0 var(--r) var(--r) 0;
  padding:.2rem 1rem .4rem;margin:0 0 .9rem;background:var(--wash);
}
.child__head{
  display:flex;align-items:center;justify-content:space-between;gap:1rem;
  padding:.75rem 0 0;
}
.child__t{
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.14em;
  font-weight:700;color:var(--blue);margin:0;
}
.child__rm{
  font:inherit;font-size:var(--t-xs);background:none;border:0;color:var(--muted);
  cursor:pointer;padding:0 .3rem;min-height:44px;text-decoration:underline;
}
.child__rm:hover{color:var(--bad-ink)}
.child .field{padding-bottom:1rem}

.add-child{
  font:inherit;font-size:var(--t-base);font-weight:700;
  background:none;border:1px dashed var(--edge);color:var(--navy);
  padding:.6rem 1rem;border-radius:var(--r-sm);cursor:pointer;width:100%;
}
.add-child:hover{border-color:var(--navy);border-style:solid;background:var(--wash)}

.sibling-note{
  margin:.9rem 0 0;padding:.7rem .9rem;border-left:3px solid var(--ok);
  background:var(--wash);font-size:var(--t-sm);color:var(--muted);border-radius:var(--r-xs);}
.sibling-note b{color:var(--ink)}

/* ---------- согласия ---------- */

.consent{display:flex;gap:.7rem;align-items:flex-start;padding:.7rem 0}
.consent + .consent{border-top:1px solid var(--hair)}
.consent input{
  flex:none;width:1.15rem;height:1.15rem;margin:.2rem 0 0;
  accent-color:var(--navy);cursor:pointer;
}
.consent label{cursor:pointer;font-size:var(--t-base);line-height:1.45}
.consent .note{display:block;font-size:var(--t-sm);color:var(--faint);margin-top:.15rem}

/* ---------- отправка ---------- */

.submit{padding:1.9rem 0 .4rem}
.btn{
  font:inherit;font-weight:700;font-size:var(--t-md);letter-spacing:.01em;
  background:var(--cta-bg);color:var(--cta-fg);border:1px solid var(--cta-bg);
  padding:.85rem 1.6rem;border-radius:var(--r-sm);cursor:pointer;
  width:100%;transition:filter .14s;
}
.btn:hover{filter:brightness(1.08)}
.btn:active{filter:brightness(.94)}
.submit__note{margin:.85rem 0 0;font-size:var(--t-sm);color:var(--muted);text-align:center}

.consent-choice{margin:1rem 0;padding:1rem;border:1px solid var(--edge);border-radius:var(--r-sm)}
.consent-choice legend{padding:0 .35rem;font-weight:700}
.consent-choice ul{display:flex;gap:1rem;list-style:none;margin:.4rem 0 0;padding:0}
.consent-choice label{display:flex;align-items:center;gap:.45rem;min-height:48px;cursor:pointer}

.alert{
  margin:1.25rem 0 0;padding:.85rem 1rem;border-radius:var(--r);
  border-left:3px solid var(--bad);background:var(--bad-bg);
  font-size:var(--t-base);
}

/* ---------- страница «принято» ---------- */

.done{text-align:center;padding:2.6rem 0 1rem}
.done__t{
  font-family:var(--display);font-weight:700;line-height:1.1;margin:0 0 .7rem;
  font-size:var(--t-hero);
;text-wrap:balance}
.done__p{color:var(--muted);max-width:44ch;margin:0 auto 1.9rem}
.ticket{
  display:inline-block;text-align:left;
  border:1px solid var(--line);border-radius:var(--r);background:var(--wash);
  padding:1rem 1.6rem;margin:0 0 1.9rem;
}
.ticket__l{
  font-size:var(--t-xs);text-transform:uppercase;letter-spacing:.18em;color:var(--faint);
  display:block;margin-bottom:.2rem;
}
.ticket__v{
  font-family:var(--display);font-weight:700;font-size:var(--t-2xl);
  font-variant-numeric:tabular-nums;letter-spacing:.02em;color:var(--navy);
}
.steps{
  text-align:left;max-width:34rem;margin:0 auto;
  border-top:1px solid var(--hair);
}
.steps li{
  list-style:none;padding:1rem 0 1rem 2.6rem;border-bottom:1px solid var(--hair);
  position:relative;counter-increment:s;
}
.steps{padding:0;counter-reset:s}
.steps li::before{
  content:counter(s);position:absolute;left:0;top:1rem;
  width:1.55rem;height:1.55rem;border-radius:var(--r-pill);background:var(--chip-bg);color:var(--chip-fg);
  display:flex;align-items:center;justify-content:center;
  font-size:var(--t-xs);font-weight:700;font-variant-numeric:tabular-nums;
}
.steps b{display:block}
.steps span{color:var(--muted);font-size:var(--t-base)}

/* ---------- подвал ---------- */

.colophon{
  max-width:var(--doc);margin:0 auto;padding:0 1.25rem 3rem;
  font-size:var(--t-sm);color:var(--faint);text-align:center;
}
.colophon p{margin:.3rem 0}
.colophon a{color:var(--muted)}
.colophon__note{max-width:46ch;margin:.7rem auto 0!important;line-height:1.5}

/* Печать: форму иногда всё-таки распечатывают. Пусть выглядит прилично. */
@media print{
  body{background:#fff}
  .masthead .theme-toggle,.add-child,.btn,.skip{display:none}
  .doc{box-shadow:none;border:0}
  .doc__head{background:#fff;color:#000}
  .doc__kicker,.doc__lede,.doc__meta{color:#333}
}


/* Строки «что вы указали» на странице статуса заявки. */
.tbl-plain p{margin:0 0 .5rem;font-size:var(--t-base);line-height:1.5}
.tbl-plain p:last-child{margin-bottom:0}
.tbl-plain b{color:var(--ink)}