/* EDU900 — design tokens and components */

:root{
  --bg:            #ffffff;
  --bg-ground:     #f4f4f2;
  --bg-fill:       #f7f7f5;

  --ink:           #111113;
  --ink-2:         #4e4f54;
  --ink-3:         #86878d;
  --ink-inv:       #ffffff;

  --line:          #e4e4e2;
  --line-2:        #cfcfcc;
  --line-3:        #111113;

  --ok:            #0f7b4f;
  --ok-hover:      #0c6742;
  --warn:          #9a2020;
  --focus:         #1c62d6;

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, "Segoe UI Symbol", monospace;

  --t-10: 10px;
  --t-11: 11px;
  --t-12: 12px;
  --t-13: 13px;
  --t-14: 14px;
  --t-15: 15px;
  --t-17: 17px;
  --t-22: 22px;
  --t-28: 28px;
  --t-46: 46px;

  --s-1: 4px;
  --s-2: 8px;
  --s-3: 12px;
  --s-4: 16px;
  --s-5: 24px;
  --s-6: 32px;
  --s-7: 40px;
  --s-8: 56px;
  --s-9: 72px;

  --r-0: 0px;
  --r-1: 2px;

  --container: 1120px;
  --gutter: 24px;

  --col-code: 40px;
  --col-name: 216px;
}

*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0;
  background:var(--bg-ground);
  color:var(--ink);
  font-family:var(--font-sans);
  font-size:var(--t-15);
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}
h1,h2,h3,h4,p,ul,ol,dl,dd,figure{ margin:0; }
ul,ol{ padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; }
svg{ display:block; }
main{ flex:1 0 auto; }

:focus-visible{ outline:2px solid var(--focus); outline-offset:2px; }

.container{
  width:100%;
  max-width:var(--container);
  margin:0 auto;
  padding-inline:var(--gutter);
}
.mono{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-feature-settings:"tnum" 1;
}
.label{
  font-family:var(--font-mono);
  font-size:var(--t-11);
  font-weight:500;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.nowrap{ white-space:nowrap; }
.vh{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); }

/* ---------- Header ---------- */
.site-header{
  background:var(--bg);
  border-bottom:1px solid var(--line-2);
}
.header-inner{
  display:flex; align-items:center; gap:var(--s-6);
  min-height:58px;
}
.brand{ display:inline-flex; align-items:center; gap:9px; flex:none; }
.brand-mark{ width:24px; height:24px; }
.brand-name{
  font-size:var(--t-15);
  font-weight:700;
  letter-spacing:.01em;
  font-variant-numeric:tabular-nums;
  line-height:1.15;
  display:block;
}
.brand-sub{
  display:block;
  font-family:var(--font-mono);
  font-size:var(--t-10);
  letter-spacing:.09em;
  text-transform:uppercase;
  color:var(--ink-3);
  line-height:1.2;
  margin-top:2px;
}
.nav{ display:flex; align-items:center; gap:var(--s-5); margin-right:auto; }
.nav a{
  font-size:var(--t-14);
  color:var(--ink-2);
  padding:4px 0;
  border-bottom:1px solid transparent;
}
.nav a:hover{ color:var(--ink); border-bottom-color:var(--line-3); }
.nav a[aria-current="page"]{ color:var(--ink); border-bottom-color:var(--line-3); }

.btn{
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  height:38px; padding:0 16px;
  border-radius:var(--r-1);
  font-size:var(--t-14); font-weight:600;
  border:1px solid transparent;
  cursor:pointer; white-space:nowrap;
  transition:background-color .12s ease, border-color .12s ease;
}
.btn-primary{ background:var(--ink); color:var(--ink-inv); }
.btn-primary:hover{ background:#000; }
.btn-outline{ background:var(--bg); color:var(--ink); border-color:var(--line-2); }
.btn-outline:hover{ border-color:var(--ink); }
.btn-ok{ background:var(--ok); color:var(--ink-inv); }
.btn-ok:hover{ background:var(--ok-hover); }
.btn-lg{ height:44px; padding:0 18px; font-size:var(--t-15); }
.ext{ width:11px; height:11px; }

/* ---------- Hero ---------- */
.hero{ background:var(--bg); border-bottom:1px solid var(--line-2); }
.hero-inner{
  display:grid;
  grid-template-columns:minmax(0,1fr) 344px;
  gap:var(--s-9);
  padding-block:var(--s-9) var(--s-7);
  align-items:start;
}
.hero h1{
  font-size:var(--t-46);
  line-height:1.06;
  letter-spacing:-.03em;
  font-weight:700;
  margin-top:var(--s-4);
}
.hero h1 .line{ display:block; }
.hero-fact{
  margin-top:var(--s-5);
  font-size:var(--t-17);
  line-height:1.55;
  color:var(--ink-2);
  max-width:46ch;
}

.figures{
  margin-top:var(--s-7);
  padding-top:var(--s-3);
  border-top:1px solid var(--line-3);
  display:flex; flex-wrap:wrap;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-12);
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.figures li{ white-space:nowrap; }
.figures li + li::before{
  content:"·";
  color:var(--line-2);
  padding-inline:10px;
}
.figures b{ font-weight:600; color:var(--ink); }

/* ---------- Search panel ---------- */
.probe{
  border:1px solid var(--line-2);
  border-radius:var(--r-0);
  background:var(--bg);
}
.probe-head{
  padding:10px var(--s-4);
  border-bottom:1px solid var(--line);
  background:var(--bg-fill);
}
.probe-body{ padding:var(--s-4); }
.probe-title{
  font-family:var(--font-mono);
  font-size:var(--t-11);
  font-weight:500;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.probe-form{ display:flex; gap:var(--s-2); }
.probe-form input{
  flex:1; min-width:0;
  height:42px; padding:0 12px;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-13);
  color:var(--ink);
  background:var(--bg);
  border:1px solid var(--line-2);
  border-radius:var(--r-1);
}
.probe-form input::placeholder{ color:var(--ink-3); }
.probe-form input:focus{ outline:none; border-color:var(--ink); }
.probe-note{
  margin-top:var(--s-3);
  font-size:var(--t-13);
  line-height:1.5;
  color:var(--ink-3);
}
.probe-note code{ font-family:var(--font-mono); font-size:var(--t-12); color:var(--ink-2); }

/* ---------- Sheet ---------- */
.record{ padding-block:var(--s-7) var(--s-9); }
.crumbs{
  display:flex; flex-wrap:wrap; gap:7px;
  font-size:var(--t-13); color:var(--ink-3);
  margin-bottom:var(--s-4);
}
.crumbs a:hover{ color:var(--ink); text-decoration:underline; }

.sheet{
  background:var(--bg);
  border:1px solid var(--line-2);
  border-radius:var(--r-0);
}
.sheet-bar{
  display:flex; flex-wrap:wrap; gap:2px 10px;
  padding:9px var(--s-6);
  border-bottom:1px solid var(--line-2);
  background:var(--bg-fill);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-11);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.sheet-bar span + span::before{
  content:"·";
  color:var(--line-2);
  padding-right:10px;
}
.sheet-fields{ padding:var(--s-6); min-width:0; }

/* ruled field table: code | field name | value */
.fields{ border-top:1px solid var(--line-3); }
.fields > div{
  display:grid;
  grid-template-columns:var(--col-code) var(--col-name) minmax(0,1fr);
  gap:0 var(--s-4);
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.f-code{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-12);
  color:var(--ink-3);
}
.f-name{
  font-family:var(--font-mono);
  font-size:var(--t-11);
  font-weight:500;
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.f-val{ font-size:var(--t-15); color:var(--ink); min-width:0; }
.f-val-lead{ font-size:var(--t-22); font-weight:600; letter-spacing:-.015em; line-height:1.25; }
.f-val-num{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-28);
  font-weight:500;
  letter-spacing:-.01em;
  line-height:1.2;
  display:block;
  overflow-wrap:anywhere;
}
.f-val-code{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-17);
  font-weight:500;
  letter-spacing:.04em;
  display:block;
  overflow-wrap:anywhere;
}
.f-val .mono{ font-size:var(--t-15); }
.f-sub{
  display:block;
  margin-top:6px;
  font-size:var(--t-13);
  line-height:1.5;
  color:var(--ink-2);
  max-width:64ch;
}
.f-status{
  font-family:var(--font-mono);
  font-size:var(--t-14);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--ok);
}
.f-site{
  font-family:var(--font-mono);
  font-size:var(--t-17);
  font-weight:500;
  color:var(--ink);
  border-bottom:1px solid var(--line-2);
  overflow-wrap:anywhere;
}
.f-site:hover{ border-bottom-color:var(--ink); }

.sheet-action{ margin-top:var(--s-5); }

/* ---------- Control tape ---------- */
.tape-block{
  padding:var(--s-6);
  border-top:1px solid var(--line-2);
}
.block-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s-2) var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-3);
}
.block-head h3{ font-size:var(--t-15); font-weight:600; letter-spacing:-.005em; }
.block-head .label{ font-size:var(--t-11); }

.tape{ margin-top:var(--s-1); }
.tape li{
  position:relative;
  display:grid;
  grid-template-columns:112px minmax(0,1fr) auto;
  gap:0 var(--s-4);
  align-items:baseline;
  padding:12px 0 12px 22px;
  border-bottom:1px solid var(--line);
}
.tape li::before{
  content:"";
  position:absolute; left:0; top:18px;
  width:7px; height:7px;
  background:var(--ok);
}
.tape li::after{
  content:"";
  position:absolute; left:3px; top:0; bottom:0;
  width:1px; background:var(--line);
}
.tape li:first-child::after{ top:18px; }
.tape li:last-child{ border-bottom:none; }
.tape li:last-child::after{ bottom:auto; height:18px; }
.tape-date{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-13);
  color:var(--ink);
}
.tape-what{ font-size:var(--t-14); color:var(--ink); }
.tape-res{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-13);
  color:var(--ink-2);
  text-align:right;
}
.tape li.future::before{ background:var(--bg); border:1px solid var(--line-2); }
.tape li.future .tape-date,
.tape li.future .tape-what,
.tape li.future .tape-res{ color:var(--ink-3); }

/* ---------- Criteria ---------- */
.criteria-block{
  padding:var(--s-6);
  border-top:1px solid var(--line-2);
}
.cgroup{ margin-top:var(--s-5); }
.cgroup-head{
  display:flex; align-items:baseline; gap:var(--s-3);
  padding-bottom:7px;
  border-bottom:1px solid var(--line-2);
}
.cgroup-head h4{
  font-family:var(--font-mono);
  font-size:var(--t-12);
  font-weight:600;
  letter-spacing:.08em;
  text-transform:uppercase;
  color:var(--ink);
}
.cgroup-head span{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-11);
  color:var(--ink-3);
  margin-left:auto;
}
.clist{
  display:grid;
  grid-template-columns:repeat(2,minmax(0,1fr));
  column-gap:var(--s-7);
}
.clist li{
  display:grid;
  grid-template-columns:46px 14px minmax(0,1fr);
  gap:0 10px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--t-14);
  line-height:1.45;
}
.clist li.span2{ grid-column:1 / -1; }
.c-ref{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-12);
  color:var(--ink-3);
}
.c-ok{
  font-family:var(--font-mono);
  font-size:var(--t-13);
  color:var(--ok);
}

/* ---------- Explanatory block ---------- */
.means{
  padding:var(--s-6);
  border-top:1px solid var(--line-2);
  background:var(--bg-fill);
}
.means h3{ font-size:var(--t-15); font-weight:600; letter-spacing:-.005em; }
.means-grid{
  margin-top:var(--s-4);
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:var(--s-5);
}
.means-grid li{ border-top:1px solid var(--line-3); padding-top:var(--s-3); }
.means-grid h4{ font-size:var(--t-14); font-weight:600; }
.means-grid p{
  margin-top:5px;
  font-size:var(--t-13);
  line-height:1.6;
  color:var(--ink-2);
}
.means-foot{
  margin-top:var(--s-5);
  padding-top:var(--s-3);
  border-top:1px solid var(--line);
  display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5);
  justify-content:space-between;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-11);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}
.means-foot a{ color:var(--ink-2); border-bottom:1px solid var(--line-2); }
.means-foot a:hover{ color:var(--ink); border-bottom-color:var(--ink); }

/* ---------- Home sections ---------- */
.section{ padding-block:var(--s-8); border-bottom:1px solid var(--line-2); background:var(--bg); }
.section-alt{ background:var(--bg-ground); }
.section-head{
  display:flex; flex-wrap:wrap; align-items:baseline; justify-content:space-between;
  gap:var(--s-2) var(--s-4);
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-3);
}
.section-head h2{ font-size:var(--t-22); font-weight:600; letter-spacing:-.02em; }
.section-lead{
  margin-top:var(--s-4);
  font-size:var(--t-15);
  color:var(--ink-2);
  max-width:72ch;
}

.groups{
  margin-top:var(--s-5);
  display:grid;
  grid-template-columns:repeat(5,minmax(0,1fr));
  gap:var(--s-5);
}
.groups li{ border-top:1px solid var(--line-3); padding-top:var(--s-3); }
.groups .g-ref{
  display:block;
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-11);
  letter-spacing:.07em;
  color:var(--ink-3);
}
.groups h3{ margin-top:var(--s-1); font-size:var(--t-14); font-weight:600; }
.groups p{ margin-top:5px; font-size:var(--t-13); line-height:1.55; color:var(--ink-2); }

.howto{
  margin-top:var(--s-5);
  border-top:1px solid var(--line-3);
}
.howto > div{
  display:grid;
  grid-template-columns:var(--col-code) var(--col-name) minmax(0,1fr);
  gap:0 var(--s-4);
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.howto .f-val{ color:var(--ink-2); max-width:76ch; }

.section-foot{
  margin-top:var(--s-5);
  display:flex; flex-wrap:wrap; gap:var(--s-3);
  align-items:center;
}

/* ---------- Document pages ---------- */
.doc{ padding-block:var(--s-7) var(--s-9); }
.doc-head{ padding:var(--s-6) var(--s-6) var(--s-5); }
.doc-head h1{ font-size:var(--t-28); font-weight:700; letter-spacing:-.025em; line-height:1.2; }
.doc-head p{ margin-top:var(--s-3); font-size:var(--t-15); color:var(--ink-2); max-width:72ch; }
.doc-body{ padding:0 var(--s-6) var(--s-6); }
.doc-section{ padding-top:var(--s-6); }
.doc-section h2{
  font-size:var(--t-15);
  font-weight:600;
  letter-spacing:-.005em;
  padding-bottom:var(--s-3);
  border-bottom:1px solid var(--line-3);
}
.doc-section h3{ margin-top:var(--s-5); font-size:var(--t-14); font-weight:600; }
.doc-section p{ margin-top:var(--s-3); font-size:var(--t-15); line-height:1.6; color:var(--ink-2); max-width:76ch; }
.doc-section p.tight{ margin-top:var(--s-2); font-size:var(--t-13); }

.steps{ margin-top:var(--s-3); border-top:1px solid var(--line); }
.steps li{
  display:grid;
  grid-template-columns:40px minmax(0,1fr);
  gap:0 var(--s-4);
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--t-14);
  line-height:1.5;
}
.steps .s-ref{
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-12);
  color:var(--ink-3);
}
.steps b{ font-weight:600; color:var(--ink); }
.steps span.s-txt{ color:var(--ink-2); }

.plain{ margin-top:var(--s-3); border-top:1px solid var(--line); }
.plain li{
  display:grid;
  grid-template-columns:14px minmax(0,1fr);
  gap:0 10px;
  align-items:baseline;
  padding:9px 0;
  border-bottom:1px solid var(--line);
  font-size:var(--t-14);
  line-height:1.5;
  color:var(--ink-2);
}
.plain .p-mark{
  font-family:var(--font-mono);
  font-size:var(--t-12);
  color:var(--ink-3);
}

.contacts{ margin-top:var(--s-3); border-top:1px solid var(--line-3); }
.contacts > div{
  display:grid;
  grid-template-columns:var(--col-name) minmax(0,1fr);
  gap:0 var(--s-4);
  align-items:baseline;
  padding:11px 0;
  border-bottom:1px solid var(--line);
}
.contacts a{ border-bottom:1px solid var(--line-2); }
.contacts a:hover{ border-bottom-color:var(--ink); }

/* ---------- Verify result ---------- */
.vpanel{ margin-top:var(--s-5); }
.vresult{
  border:1px solid var(--line-2);
  background:var(--bg);
}
.vresult[hidden]{ display:none; }
.vresult-bar{
  padding:9px var(--s-5);
  border-bottom:1px solid var(--line-2);
  background:var(--bg-fill);
  font-family:var(--font-mono);
  font-size:var(--t-11);
  letter-spacing:.07em;
  text-transform:uppercase;
  color:var(--ink-2);
}
.vresult-body{ padding:var(--s-5); }
.vresult .fields{ margin-top:0; }
.vresult-action{ margin-top:var(--s-5); }
.vmiss{
  padding:var(--s-5);
  border:1px solid var(--line-2);
  background:var(--bg);
}
.vmiss[hidden]{ display:none; }
.vmiss-status{
  font-family:var(--font-mono);
  font-size:var(--t-14);
  font-weight:600;
  letter-spacing:.08em;
  color:var(--warn);
}
.vmiss p{ margin-top:var(--s-3); font-size:var(--t-14); color:var(--ink-2); max-width:64ch; }

/* ---------- Footer ---------- */
.site-footer{
  flex:none;
  background:var(--bg);
  border-top:1px solid var(--line-2);
  padding-block:var(--s-6);
}
.footer-inner{
  display:flex; flex-wrap:wrap; gap:var(--s-4) var(--s-6);
  justify-content:space-between; align-items:baseline;
}
.footer-nav{ display:flex; flex-wrap:wrap; gap:var(--s-2) var(--s-5); }
.footer-nav a{ font-size:var(--t-14); color:var(--ink-2); }
.footer-nav a:hover{ color:var(--ink); }
.footer-line{
  width:100%;
  padding-top:var(--s-4);
  border-top:1px solid var(--line);
  font-family:var(--font-mono);
  font-variant-numeric:tabular-nums;
  font-size:var(--t-11);
  letter-spacing:.06em;
  text-transform:uppercase;
  color:var(--ink-3);
}

/* ---------- 404 ---------- */
.stub{ padding-block:var(--s-9); }
.stub h1{ font-size:var(--t-28); font-weight:700; letter-spacing:-.025em; }
.stub p{ margin-top:var(--s-4); color:var(--ink-2); max-width:60ch; }
.stub .section-foot{ margin-top:var(--s-5); }

/* ---------- Responsive ---------- */
@media (max-width:1080px){
  .hero-inner{ grid-template-columns:minmax(0,1fr) 300px; gap:var(--s-7); }
  .groups{ grid-template-columns:repeat(3,minmax(0,1fr)); }
}
@media (max-width:900px){
  :root{ --t-46:36px; --col-name:180px; }
  .hero-inner{
    grid-template-columns:minmax(0,1fr);
    gap:var(--s-6);
    padding-block:var(--s-7) var(--s-6);
  }
  .probe{ max-width:420px; }
  .clist{ grid-template-columns:minmax(0,1fr); }
  .clist li.span2{ grid-column:auto; }
  .means-grid{ grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
  .groups{ grid-template-columns:repeat(2,minmax(0,1fr)); }
}
@media (max-width:720px){
  :root{ --gutter:18px; --t-46:30px; --t-28:22px; --t-22:19px; }
  .nav{ display:none; }
  .brand{ margin-right:auto; }
  .record,.doc{ padding-block:var(--s-5) var(--s-7); }
  .sheet-bar,.sheet-fields,.tape-block,.criteria-block,.means{ padding-inline:var(--s-4); }
  .doc-head,.doc-body{ padding-inline:var(--s-4); }
  .fields > div,
  .howto > div{
    grid-template-columns:var(--col-code) minmax(0,1fr);
    row-gap:4px;
  }
  .fields .f-val,
  .howto .f-val{ grid-column:2; }
  .contacts > div{ grid-template-columns:minmax(0,1fr); row-gap:4px; }
  .tape li{ grid-template-columns:minmax(0,1fr) auto; }
  .tape-date{ grid-column:1 / -1; color:var(--ink-2); }
  .figures{ flex-direction:column; gap:5px; }
  .figures li + li::before{ content:none; padding:0; }
  .groups{ grid-template-columns:minmax(0,1fr); gap:var(--s-4); }
}
@media (max-width:420px){
  :root{ --gutter:14px; --t-46:26px; }
  .header-inner{ gap:var(--s-3); min-height:54px; }
  .brand-sub{ display:none; }
  .probe-form{ flex-direction:column; }
  .probe-form .btn{ width:100%; }
  .sheet-action .btn,
  .vresult-action .btn{ width:100%; }
  .tape li{ grid-template-columns:minmax(0,1fr); }
  .tape-res{ text-align:left; }
  .clist li{ grid-template-columns:42px 14px minmax(0,1fr); }
  .header-inner .btn{ padding:0 12px; }
}