/* Облик «Зачётка»: синяя обложка, линованная бумага, печать на паспорте */
:root{
  --cover:#1C2A4A; --cover-ink:#E9ECF5; --cover-mut:#AEB7D0; --cover-track:rgba(255,255,255,.18); --cover-bar:#C9D2F2;
  --paper:#F7F8FB; --sheet:#FFFFFF; --ink:#1B2233; --mut:#667089; --rule:#DCE0EA;
  --stamp:#3346A8; --stamp-soft:#EBEEFA; --btn:#1C2A4A; --btn-ink:#FFFFFF; --err:#A8231C;
  --sans:Commissioner,system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  --serif:"PT Serif",Georgia,"Times New Roman",serif;
}
@media (prefers-color-scheme: dark){
  :root{
    color-scheme:dark;
    --cover:#0F1628; --cover-ink:#E6E9F2; --cover-mut:#8F9AB8; --cover-track:rgba(255,255,255,.12); --cover-bar:#8E9DE8;
    --paper:#141925; --sheet:#1A2030; --ink:#E6E9F2; --mut:#98A2BC; --rule:#2A3246;
    --stamp:#9DAAF2; --stamp-soft:#222A45; --btn:#C9D2F2; --btn-ink:#0F1628; --err:#F2B8B5;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{background:var(--paper)}
body{margin:0;color:var(--ink);font:16px/1.55 var(--sans);-webkit-text-size-adjust:100%}
.in{max-width:560px;margin:0 auto;padding-inline:20px}

/* Обложка */
.cover{background:var(--cover);color:var(--cover-ink);padding-top:env(safe-area-inset-top,0px)}
.cover .in{padding-block:18px 20px;display:flex;flex-direction:column;gap:4px}
.cover .top{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:14px}
.brand{font-size:14px;font-weight:600;color:var(--cover-mut)}
.cover .in>.brand{margin-bottom:14px}
/* Переключатель языка на обложке */
.langs{display:flex;gap:2px;flex:none}
.langs button{font:500 13px var(--sans);color:var(--cover-mut);background:transparent;border:0;border-radius:4px;padding:5px 9px;cursor:pointer}
.langs button:hover{color:var(--cover-ink)}
.langs button[aria-pressed="true"]{background:var(--cover-track);color:var(--cover-ink);font-weight:600}
.langs button:focus-visible{outline:2px solid var(--cover-bar);outline-offset:1px}
.step{font-size:14px;color:var(--cover-mut)}
.cover h1{font-size:26px;line-height:1.2;font-weight:600;margin:0;text-wrap:balance}
.cover .lead{margin:4px 0 0;color:var(--cover-mut);font-size:15px}
.progress{height:3px;background:var(--cover-track);margin-top:16px}
.progress i{display:block;height:100%;background:var(--cover-bar);transition:width .25s ease}

/* Лист */
.body .in{padding-block:8px 48px;display:flex;flex-direction:column;gap:20px}
.hint{color:var(--mut);font-size:15px;margin:0}
.err{color:var(--err);font-size:15px;margin:0}

/* Анкета */
.fields{display:flex;flex-direction:column;gap:18px;padding-top:16px}
label.f{display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--mut)}
input,select{font:inherit;font-size:17px;color:var(--ink);background:var(--sheet);border:1px solid var(--rule);border-radius:4px;padding:11px 12px;width:100%}
input::placeholder{color:var(--mut);opacity:.7}
input:focus,select:focus{outline:2px solid var(--stamp);outline-offset:0;border-color:transparent}
button:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}

/* Строки выбора, как записи в зачётке */
.search{margin-top:14px}
.opts{display:flex;flex-direction:column}
.opt{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:72px 1fr 20px;gap:12px;align-items:baseline;padding:15px 0;border-bottom:1px solid var(--rule)}
.opt.nocode{grid-template-columns:1fr 20px}
.opt .code{font-size:13px;color:var(--mut);font-variant-numeric:tabular-nums}
.opt .t{font-size:17px;line-height:1.35}
.opt .s{font-size:14px;color:var(--mut);margin-top:2px}
.opt .mark{color:var(--stamp);font-weight:700;text-align:right}
.opt:hover .t{color:var(--stamp)}
.opt.sel .t,.opt.sel .code{color:var(--stamp);font-weight:600}
.opt:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.opt .places{font-size:14px;color:var(--stamp);margin-top:2px;font-variant-numeric:tabular-nums}
.opt .places.none{color:var(--err)}
.opt:disabled{cursor:not-allowed}
.opt:disabled .t,.opt:disabled .s{color:var(--mut)}
.opt:disabled:hover .t{color:var(--mut)}
.opt.big{padding:20px 0}
.opt.big .t{font-size:19px;font-weight:500}

/* Проверка */
.entries{display:flex;flex-direction:column}
.entry{all:unset;box-sizing:border-box;cursor:pointer;display:grid;grid-template-columns:110px 1fr auto;gap:12px;align-items:baseline;padding:14px 0;border-bottom:1px solid var(--rule)}
.entry .k{font-size:14px;color:var(--mut)}
.entry .v{font-size:16px;font-weight:500}
.entry .e{font-size:14px;color:var(--stamp)}
.entry:hover .v{color:var(--stamp)}
.entry:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}

/* Кнопки */
.nav{display:flex;gap:12px;align-items:center}
.btn{font:600 16px var(--sans);border-radius:4px;padding:14px 20px;cursor:pointer;border:1px solid var(--rule);background:transparent;color:var(--ink)}
.btn.primary{background:var(--btn);border-color:var(--btn);color:var(--btn-ink);flex:1}
.btn:disabled{opacity:.55;cursor:wait}
/* «Назад / Далее» прилипает к низу экрана: после выбора в длинном списке не нужно листать */
.nav.sticky{position:sticky;bottom:0;z-index:1;background:var(--paper);margin-top:-8px;
  padding:12px 0 calc(12px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--rule)}

/* Кнопка «Паспорт» рядом с организацией */
.orow{display:grid;grid-template-columns:1fr auto;gap:12px;align-items:center;border-bottom:1px solid var(--rule)}
.orow .opt{border-bottom:0}
.peek{font:500 14px var(--sans);color:var(--stamp);background:transparent;border:1px solid var(--rule);border-radius:4px;padding:7px 10px;cursor:pointer}
.peek:hover{border-color:var(--stamp)}
.peek:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.peek.wide{align-self:flex-start;padding:10px 14px;font-size:15px}

/* Паспорт-документ */
.doc{background:var(--sheet);border:1px solid var(--rule);padding:22px 20px 24px;position:relative;margin-top:16px;overflow:hidden}
.doc h2{font-family:var(--serif);font-weight:700;font-size:23px;line-height:1.25;margin:0 0 18px;padding-right:8px;text-wrap:balance}
.doc dl{margin:0;display:grid;grid-template-columns:96px 1fr;gap:10px 14px;font-size:16px}
.doc dt{color:var(--mut);font-size:14px;padding-top:1px}
.doc dd{margin:0;overflow-wrap:anywhere}
.doc dd a{color:var(--stamp)}
.doc h3{font-size:15px;font-weight:600;margin:20px 0 6px}
.doc .txt{margin:0;font-size:15px;line-height:1.55;white-space:pre-line}
.doc details{margin-top:14px;border-top:1px solid var(--rule);padding-top:12px}
.doc summary{cursor:pointer;color:var(--stamp);font-size:15px;font-weight:500}
.doc summary:focus-visible{outline:2px solid var(--stamp);outline-offset:2px}
.doc details .txt{margin-top:10px;color:var(--ink)}
.doc .foot{display:flex;justify-content:space-between;align-items:flex-end;margin-top:22px;min-height:96px}
.doc .when{font-size:14px;color:var(--mut)}
.seal{width:96px;height:96px;flex:none;border:2.5px solid var(--stamp);border-radius:50%;color:var(--stamp);display:grid;place-items:center;text-align:center;
  font-size:11px;font-weight:700;line-height:1.25;letter-spacing:.02em;transform:rotate(-12deg);opacity:.9;position:relative}
.seal::before{content:"";position:absolute;inset:5px;border:1px solid var(--stamp);border-radius:50%}
.seal b{display:block;font-size:17px}
@media (prefers-reduced-motion:no-preference){
  .seal{animation:press .45s cubic-bezier(.2,.9,.3,1.3) .15s both}
  @keyframes press{from{transform:rotate(-24deg) scale(1.6);opacity:0}to{transform:rotate(-12deg) scale(1);opacity:.9}}
}

@media (max-width:420px){
  .opt{grid-template-columns:1fr 20px}
  .opt .code{grid-column:1/-1;margin-bottom:-8px}
  .entry{grid-template-columns:1fr auto}
  .entry .k{grid-column:1/-1;margin-bottom:-8px}
  .doc dl{grid-template-columns:1fr;gap:2px}
  .doc dd{margin-bottom:8px}
}