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

:root{
  --sans:'Golos Text','Segoe UI',system-ui,-apple-system,sans-serif;
  --mono:'IBM Plex Mono',ui-monospace,'Cascadia Mono',Consolas,monospace;
  --ground:#E9EBEF;   /* фон страницы — серая бумага для копира */
  --paper:#FFFFFF;
  --ink:#171A21;
  --ink-2:#5C6472;
  --ink-3:#8A93A2;
  --rule:#D4D8DF;
  --rule-2:#B8BEC8;
  --accent:#1B3A8F;   /* чернила */
  --accent-2:#2E56C4;
  --mark:#FFD84D;     /* маркер */
  --mark-soft:#FFF0AE;
  --red:#B32020;
  --focus:#2E56C4;
  color-scheme:light;   /* тёмной темы нет: и поля формы, и полосы прокрутки всегда светлые */
}

*{box-sizing:border-box}
[hidden]{display:none !important}   /* иначе display:grid у .field перебивает атрибут */
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ground);color:var(--ink);font:400 17px/1.6 var(--sans);
  font-feature-settings:'liga' 1,'kern' 1;overflow-x:hidden}
img{max-width:100%;height:auto}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
.prose a{color:var(--accent);text-decoration:none;border-bottom:1px solid var(--rule-2)}
.prose a:hover{border-bottom-color:var(--accent);text-decoration:none}
h1,h2,h3,h4{font-weight:600;line-height:1.12;letter-spacing:-.022em;margin:0 0 .5em}
h1{font-size:clamp(1.9rem,1.2rem + 2.1vw,3.1rem);font-weight:700}
h2{font-size:clamp(1.35rem,1rem + 1.1vw,2rem)}
h3{font-size:1.12rem}
p{margin:0 0 1em}
ul,ol{margin:0 0 1em;padding-left:1.25em}
li{margin-bottom:.35em}
hr{border:0;border-top:1px solid var(--rule);margin:32px 0}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
::selection{background:var(--mark);color:#171A21}

.wrap{max-width:1560px;margin:0 auto;padding:0 clamp(16px,3.2vw,56px)}
.section{padding:clamp(34px,4vw,64px) 0}
.section-top{padding-top:clamp(20px,2.4vw,34px)}
.tight{padding-top:0}
.prose{max-width:74ch}
.lead{font-size:clamp(1.02rem,.97rem + .3vw,1.22rem);color:var(--ink-2);line-height:1.55}
.eyebrow{font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.16em;color:var(--ink-3);margin:0 0 14px}
.mark{background:var(--mark-soft);padding:0 .18em;box-decoration-break:clone}
.small{font-size:.88rem;color:var(--ink-2)}
.mono{font-family:var(--mono)}

/* Заголовок раздела с номером на полях, как в бланке */
.h-num{display:flex;align-items:baseline;gap:14px;border-top:2px solid var(--ink);padding-top:12px;margin-bottom:22px}
.h-num span{font:500 .72rem/1 var(--mono);color:var(--ink-3);letter-spacing:.1em;padding-top:.4em}
.h-num h2{margin:0}

/* ── Шапка ─────────────────────────────────────────────── */
.top{border-bottom:1px solid var(--rule);background:var(--paper)}
.top-in{display:flex;align-items:center;gap:clamp(14px,2vw,32px);min-height:60px}
.logo{display:flex;align-items:center;gap:10px;color:var(--ink);font-weight:600;letter-spacing:-.02em;flex:0 0 auto}
.logo:hover{text-decoration:none}
.logo b{display:inline-block;font:500 .78rem/1 var(--mono);letter-spacing:.06em;border:2px solid var(--ink);padding:.42em .5em;text-transform:uppercase}
.logo i{font-style:normal;font-size:1.06rem}
.nav{display:flex;gap:clamp(10px,1.4vw,26px);margin-left:auto;align-items:center;flex-wrap:wrap}
.nav a{color:var(--ink-2);font-size:.92rem}
.nav a:hover{color:var(--ink);text-decoration:none}
.nav a.active{color:var(--ink);box-shadow:inset 0 -2px 0 var(--mark)}
.burger{display:none;border:1px solid var(--rule-2);background:transparent;color:var(--ink-2);
  font:500 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;padding:.6em .7em;cursor:pointer}
.burger:hover{color:var(--ink);border-color:var(--ink)}

/* ── Кнопки-штампы ─────────────────────────────────────── */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;
  font:500 .78rem/1 var(--mono);text-transform:uppercase;letter-spacing:.11em;
  padding:1em 1.5em;border:2px solid var(--ink);background:var(--paper);color:var(--ink);
  box-shadow:4px 4px 0 var(--ink);cursor:pointer;transition:transform .08s ease,box-shadow .08s ease;text-align:center}
.btn:hover{transform:translate(2px,2px);box-shadow:2px 2px 0 var(--ink);text-decoration:none;color:var(--ink)}
.btn:active{transform:translate(4px,4px);box-shadow:0 0 0 var(--ink)}
.btn-mark{background:var(--mark);color:#171A21;border-color:#171A21;box-shadow:4px 4px 0 #171A21}
.btn-mark:hover{color:#171A21;box-shadow:2px 2px 0 #171A21}
.btn-ink{background:var(--accent);color:#fff;border-color:var(--accent);box-shadow:4px 4px 0 var(--ink)}
.btn-ink:hover{color:#fff;box-shadow:2px 2px 0 var(--ink)}
.btn-quiet{box-shadow:none;border-color:var(--rule-2);color:var(--ink-2);padding:.85em 1.1em}
.btn-quiet:hover{transform:none;box-shadow:none;border-color:var(--ink);color:var(--ink)}

/* ── Генератор ─────────────────────────────────────────── */
.gen{display:grid;grid-template-columns:minmax(0,1fr) minmax(300px,42%);gap:clamp(24px,3vw,56px);align-items:start}
.gen-form{background:var(--paper);border:1px solid var(--rule-2);padding:clamp(16px,2vw,30px)}
.orgtype{display:flex;flex-wrap:wrap;gap:0;border:2px solid var(--ink);margin:0 0 22px;width:fit-content;max-width:100%}
.orgtype label{position:relative;display:block}
.orgtype input{position:absolute;opacity:0;width:0;height:0}
.orgtype span{display:block;font:500 .74rem/1 var(--mono);text-transform:uppercase;letter-spacing:.09em;
  padding:.85em 1.05em;cursor:pointer;border-right:2px solid var(--ink);color:var(--ink-2);white-space:nowrap}
.orgtype label:last-child span{border-right:0}
.orgtype input:checked + span{background:var(--ink);color:var(--paper)}
.orgtype input:focus-visible + span{outline:2px solid var(--focus);outline-offset:-4px}

.fields{display:grid;grid-template-columns:repeat(auto-fit,minmax(215px,1fr));gap:16px 26px}
.field{display:grid;gap:3px;align-content:start}
.field.wide{grid-column:1/-1}
.field label{font:500 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.field input,.field select{font:400 1rem var(--sans);padding:.45em .1em;border:0;border-bottom:1.5px solid var(--rule-2);
  border-radius:0;background:transparent;color:var(--ink);width:100%;min-width:0;-webkit-appearance:none;appearance:none}
.field select{padding-right:1.2em;background-image:linear-gradient(45deg,transparent 50%,var(--ink-2) 50%),linear-gradient(135deg,var(--ink-2) 50%,transparent 50%);
  background-position:calc(100% - 9px) 1.05em,calc(100% - 4px) 1.05em;background-size:5px 5px,5px 5px;background-repeat:no-repeat}
.field input::placeholder{color:var(--ink-3);opacity:.75}
.field input:focus,.field select:focus{outline:0;border-bottom:2px solid var(--accent)}
.field .hint{font-size:.78rem;color:var(--ink-3);line-height:1.35}

.gen-actions{display:flex;align-items:center;gap:14px;margin-top:26px;flex-wrap:wrap}
.gen-status{font:400 .78rem var(--mono);color:var(--ink-2)}
.gen-note{color:var(--ink-3);font-size:.84rem;margin:16px 0 0;max-width:60ch}

.a4-wrap{position:sticky;top:14px}
.a4-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin:0 0 10px}
.a4-caption{font:500 .68rem/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin:0}
.a4-holder{min-height:220px;position:relative}
/* Уголки-метки реза вокруг листа */
.a4-holder::before,.a4-holder::after{content:'';position:absolute;width:14px;height:14px;border:1px solid var(--rule-2)}
.a4-holder::before{left:-7px;top:-7px;border-right:0;border-bottom:0}
.a4-holder::after{right:-7px;bottom:-7px;border-left:0;border-top:0}
.a4{aspect-ratio:210/297;background:#fff;color:#000;border:1px solid var(--rule-2);
  font-family:'Times New Roman',Times,serif;display:flex;flex-direction:column;
  container-type:inline-size;font-size:clamp(6px,2.36cqw,15px);line-height:1.5;overflow:hidden}
.a4 p{margin:0}

/* ── Хлебные крошки ────────────────────────────────────── */
.crumbs{margin:0 0 18px}
.crumbs ol{list-style:none;display:flex;flex-wrap:wrap;gap:6px 10px;margin:0;padding:0;
  font:400 .78rem var(--mono);color:var(--ink-3)}
.crumbs li{margin:0}
.crumbs li + li::before{content:'/';margin-right:10px;color:var(--rule-2)}
.crumbs a{color:var(--ink-2)}

/* ── Списки-реестры ────────────────────────────────────── */
.reg{border-top:2px solid var(--ink);margin:0 0 10px}
.reg-row{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1.9fr) auto;gap:8px 22px;align-items:baseline;
  padding:11px 0;border-bottom:1px solid var(--rule);color:var(--ink)}
.reg-row:hover{background:var(--paper);text-decoration:none}
.reg-row b{font-weight:600}
.reg-row span{color:var(--ink-2);font-size:.92rem}
.reg-row em{font:400 .76rem var(--mono);font-style:normal;color:var(--ink-3);text-align:right;white-space:nowrap}
.cols{columns:3 260px;column-gap:40px}
.cols a{display:block;padding:6px 0;break-inside:avoid;color:var(--ink)}
.cols a:hover{color:var(--accent);text-decoration:none}
.cols a i{font-style:normal;color:var(--ink-3);font-size:.86rem}
.chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 6px;padding:0;list-style:none}
.chips li{margin:0}
.chips a{display:inline-block;border:1px solid var(--rule-2);padding:.48em .8em;color:var(--ink-2);font-size:.92rem}
.chips a:hover{border-color:var(--ink);color:var(--ink);text-decoration:none}

/* ── Двухколоночные разделы, шаги, сверка ──────────────── */
.duo{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:clamp(20px,2.4vw,48px)}
.steps{list-style:none;padding:0;margin:0;counter-reset:s}
.steps li{counter-increment:s;display:grid;grid-template-columns:2.3em minmax(0,1fr);gap:14px;
  padding:14px 0;border-top:1px solid var(--rule)}
.steps li::before{content:counter(s,decimal-leading-zero);font:500 .8rem/1.5 var(--mono);color:var(--ink-3)}
.steps b{display:block;font-weight:600}
.steps p{grid-column:2;margin:.15em 0 0;color:var(--ink-2);font-size:.95rem}
.check{list-style:none;padding:0;margin:0}
.check li{padding:10px 0 10px 26px;border-bottom:1px solid var(--rule);position:relative;color:var(--ink-2)}
/* Маркер — короткая линейка в цвете чернил: пустой квадратик читался как пропавший символ шрифта */
.check li::before{content:'';position:absolute;left:0;top:1.35em;width:14px;height:2px;background:var(--accent)}
.check b{color:var(--ink);font-weight:600}

/* Таблица «строка листа → что писать» */
.tbl{width:100%;border-collapse:collapse;font-size:.95rem}
.tbl th,.tbl td{text-align:left;padding:10px 14px 10px 0;border-bottom:1px solid var(--rule);vertical-align:top}
.tbl th{font:500 .7rem var(--mono);text-transform:uppercase;letter-spacing:.09em;color:var(--ink-3);border-bottom:2px solid var(--ink)}
.tbl td:first-child{white-space:nowrap;font-weight:600;width:1%}
.tbl-wrap{overflow-x:auto}

/* ── Блок сервиса-партнёра ─────────────────────────────── */
.pt{display:grid;grid-template-columns:minmax(0,1fr) auto;gap:22px;align-items:center;
  background:var(--paper);border:1px solid var(--rule-2);border-left:6px solid var(--mark);
  padding:clamp(16px,2vw,26px);margin:26px 0}
.pt-title{font-weight:600;font-size:1.06rem;margin:0 0 .35em}
.pt-text{margin:0;color:var(--ink-2);font-size:.95rem}
.pt-note{margin:.6em 0 0;color:var(--ink-3);font-size:.8rem}

/* ── FAQ ───────────────────────────────────────────────── */
.faq-list{border-top:2px solid var(--ink);max-width:90ch}
.faq details{border-bottom:1px solid var(--rule)}
.faq summary{cursor:pointer;padding:14px 30px 14px 0;font-weight:600;position:relative;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';position:absolute;right:4px;top:13px;font:400 1.25rem/1 var(--mono);color:var(--ink-3)}
.faq details[open] summary::after{content:'−'}
.faq .faq-a{padding:0 0 14px;color:var(--ink-2);max-width:74ch}
.faq .faq-a p:last-child{margin-bottom:0}

/* ── Подвал ────────────────────────────────────────────── */
.foot{border-top:2px solid var(--ink);background:var(--paper);padding:34px 0 44px;margin-top:clamp(30px,4vw,60px)}
.foot-in{display:grid;grid-template-columns:minmax(0,1.4fr) repeat(auto-fit,minmax(160px,1fr));gap:26px 40px}
.foot h3{font:500 .7rem/1 var(--mono);text-transform:uppercase;letter-spacing:.12em;color:var(--ink-3);margin:0 0 12px}
.foot ul{list-style:none;padding:0;margin:0}
.foot li{margin-bottom:7px}
.foot a{color:var(--ink-2);font-size:.93rem}
.foot a:hover{color:var(--ink)}
.foot-note{color:var(--ink-3);font-size:.84rem;margin:0;max-width:52ch}

/* ── Адаптив ───────────────────────────────────────────── */
@media (max-width:900px){
  .gen{grid-template-columns:minmax(0,1fr)}
  .a4-wrap{position:static;max-width:520px}
  .cols{columns:2 240px}
}
@media (max-width:760px){
  body{font-size:16px}
  .burger{display:inline-block;margin-left:auto}
  .nav{display:none;width:100%;flex-direction:column;align-items:flex-start;gap:2px;
    order:3;border-top:1px solid var(--rule);padding:10px 0;margin-left:0}
  .nav.open{display:flex}
  .top-in{flex-wrap:wrap;padding-top:8px;padding-bottom:8px}
  .fields{grid-template-columns:minmax(0,1fr)}
  .reg-row{grid-template-columns:minmax(0,1fr);gap:2px}
  .reg-row em{text-align:left}
  .cols{columns:1}
  .pt{grid-template-columns:minmax(0,1fr)}
  .pt-act .btn{width:100%}
  .gen-actions .btn{flex:1 1 auto}
  .foot-in{grid-template-columns:minmax(0,1fr)}
}
@media (prefers-reduced-motion:reduce){
  *{transition:none !important}
}
@media print{
  .top,.foot,.gen-form,.pt,.crumbs,.btn{display:none !important}
  body{background:#fff}
  .a4{border:0}
}

/* Служебное */
.visually-hidden{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
fieldset{margin:0;padding:0;border:0;min-width:0}

/* Первый экран: текст и колонка «как это устроено» */
.hero{display:grid;grid-template-columns:minmax(0,1.5fr) minmax(260px,430px);gap:clamp(24px,3vw,64px);align-items:start}
.hero-steps{list-style:none;margin:0;padding:0;counter-reset:hs;border-top:2px solid var(--ink)}
.hero-steps li{counter-increment:hs;display:grid;grid-template-columns:2.4em minmax(0,1fr);gap:12px;
  padding:13px 0;border-bottom:1px solid var(--rule);margin:0}
.hero-steps li::before{content:counter(hs,decimal-leading-zero);font:500 .76rem/1.5 var(--mono);color:var(--ink-3)}
.hero-steps b{font-weight:600;font-size:.98rem}
.hero-steps p{grid-column:2;margin:.15em 0 0;color:var(--ink-2);font-size:.9rem;line-height:1.45}
@media (max-width:900px){.hero{grid-template-columns:minmax(0,1fr)}}
.a4 .ghost{color:#A7ADB8}

/* Поиск по справочнику вузов */
.combo{position:relative}
.combo-input{font:400 1rem var(--sans);padding:.45em 1.7em .45em .1em;border:0;border-bottom:1.5px solid var(--rule-2);
  border-radius:0;background:transparent;color:var(--ink);width:100%;min-width:0}
.combo-input::placeholder{color:var(--ink-3);opacity:.75}
.combo-input:focus{outline:0;border-bottom:2px solid var(--accent)}
.combo-clear{position:absolute;right:0;top:.1em;width:1.5em;height:1.9em;padding:0;border:0;background:transparent;
  color:var(--ink-3);font:400 1.25rem/1 var(--sans);cursor:pointer}
.combo-clear:hover{color:var(--ink)}
.combo-list{position:absolute;z-index:30;left:0;right:0;top:100%;margin:3px 0 0;padding:0;list-style:none;
  background:var(--paper);border:1.5px solid var(--ink);max-height:min(52vh,360px);overflow-y:auto;box-shadow:5px 5px 0 var(--rule-2)}
.combo-list li{display:block;margin:0;padding:.5em .7em;border-bottom:1px solid var(--rule);cursor:pointer;font-size:.94rem;line-height:1.3}
.combo-list li:last-child{border-bottom:0}
.combo-list li b{font-weight:600}
.combo-list li span{color:var(--ink-2)}
.combo-list li i{display:block;font:400 .7rem var(--mono);font-style:normal;color:var(--ink-3);margin-top:3px;text-transform:uppercase;letter-spacing:.08em}
.combo-list li.on,.combo-list li:hover{background:var(--mark-soft)}
.combo-list li[aria-selected=true]{box-shadow:inset 3px 0 0 var(--accent)}
.combo-empty{color:var(--ink-2);cursor:default}
.combo-empty:hover{background:transparent}

/* Нижняя строка подвала: оператор, почта, политика */
.foot-legal{display:flex;flex-wrap:wrap;gap:6px 22px;margin-top:28px;padding-top:14px;border-top:1px solid var(--rule);
  font-size:.82rem;color:var(--ink-3)}
.foot-legal a{color:var(--ink-2)}
.foot-legal a:hover{color:var(--ink)}

/* Поиск над списком вузов (/vuzy/, /gorod/…/): прилипает к верху, пока листаешь длинный список */
.filter{position:sticky;top:0;z-index:5;display:flex;align-items:flex-end;justify-content:space-between;gap:10px 24px;
  flex-wrap:wrap;background:var(--ground);padding:12px 0 16px}
.filter-box{display:grid;gap:4px;flex:1 1 320px;max-width:760px}
.filter-box label{font:500 .68rem/1.3 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.filter-input{font:400 1.12rem var(--sans);padding:.5em .1em;border:0;border-bottom:1.5px solid var(--rule-2);border-radius:0;
  background:var(--paper);color:var(--ink);width:100%;min-width:0;-webkit-appearance:none;appearance:none;padding-left:.5em}
.filter-input::placeholder{color:var(--ink-3);opacity:.8}
.filter-input:focus{outline:0;border-bottom:2px solid var(--accent)}
.filter-count{margin:0;padding-bottom:.9em;font:500 .72rem/1 var(--mono);text-transform:uppercase;letter-spacing:.1em;color:var(--ink-3)}
.reg-empty{margin:0;padding:14px 0;border-bottom:1px solid var(--rule);color:var(--ink-2)}
@media (max-width:760px){
  /* На телефоне прилипшая строка поиска не должна съедать пол-экрана */
  .filter{padding:8px 0 10px;gap:6px 16px}
  .filter-box label{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  .filter-count{padding-bottom:0}
}

/* Значки вузов: фавиконка сайта вуза или аббревиатура в рамке, если иконки нет */
.vuz-ico{flex:0 0 auto;display:inline-block;width:24px;height:24px;padding:2px;border:1px solid var(--rule);
  background:#fff;object-fit:contain;vertical-align:middle}
.vuz-ico-txt{display:inline-flex;align-items:center;justify-content:center;padding:0;overflow:hidden;
  font:600 7px/1 var(--mono);letter-spacing:-.02em;color:var(--ink-2)}
.vuz-ico-lg{width:48px;height:48px;padding:4px}
.vuz-ico-lg.vuz-ico-txt{padding:0;font-size:12px}
.reg-row b{display:flex;align-items:center;gap:10px;min-width:0}
.h1-ico{display:flex;align-items:center;gap:16px}

/* Те же значки в выпадающем поиске формы */
.combo-list li{display:grid;grid-template-columns:20px minmax(0,1fr);gap:10px;align-items:start}
.combo-list li.combo-empty{display:block}
.combo-list li .combo-txt{color:var(--ink)}
.combo-list li .combo-name{color:var(--ink-2)}
.combo-ico{width:20px;height:20px;margin-top:1px;padding:1px;border:1px solid var(--rule);background:#fff;object-fit:contain}
.combo-ico-txt{display:flex;align-items:center;justify-content:center;padding:0;overflow:hidden;
  font:600 6px/1 var(--mono);color:var(--ink-2)}
.combo-ico-none{border:0;background:transparent}

/* Кнопка скачивания видна всё время, пока форма на экране (SEO-руководство §18: целевое действие без скролла) */
.gen-actions{position:sticky;bottom:0;z-index:4;background:var(--paper);margin-left:-4px;margin-right:-4px;
  padding:12px 4px;border-top:1px solid var(--rule)}
.gen-actions + .gen-note{margin-top:10px}
.foot-note + .foot-note{margin-top:10px}
@media (max-width:760px){
  /* На телефоне форма должна начинаться на первом экране: колонку пояснений у главной прячем,
     то же самое сказано в частых вопросах ниже */
  .hero-steps{display:none}
}