/* MetaCore Education · MOKSLO CORE Context Field · 2026-09-23 */
.mfield{
  position:relative;
  overflow:hidden;
  padding:92px 0 96px;
  background:
    radial-gradient(900px 520px at 50% 42%,rgba(54,136,185,.09),transparent 67%),
    linear-gradient(180deg,#f7fafc 0%,#eef5f8 100%);
  color:#132a35;
  border-top:1px solid rgba(15,40,52,.07);
}
.mfield:before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  background-image:
    radial-gradient(circle at 50% 50%,rgba(37,91,119,.05) 0 1px,transparent 1.5px);
  background-size:22px 22px;
  mask-image:linear-gradient(to bottom,transparent 0%,black 15%,black 88%,transparent 100%);
}
.mfield .wrap{position:relative;z-index:1}
.mfield-head{
  display:grid;
  grid-template-columns:minmax(0,1.2fr) minmax(300px,.8fr);
  gap:52px;
  align-items:end;
  margin-bottom:34px;
}
.mfield-eyebrow{
  display:block;
  margin-bottom:12px;
  color:#4d7387;
  font-size:11px;
  font-weight:800;
  letter-spacing:.15em;
  text-transform:uppercase;
}
.mfield-head h2{
  margin:0;
  max-width:850px;
  color:#102b38;
  font-size:clamp(38px,4.3vw,64px);
  line-height:1;
  letter-spacing:-.052em;
}
.mfield-head p{
  margin:0;
  color:#617985;
  font-size:16px;
  line-height:1.72;
}
.mfield-canvas{
  position:relative;
  padding:22px;
  border:1px solid rgba(15,51,67,.10);
  border-radius:30px;
  background:
    radial-gradient(circle at 50% 50%,rgba(19,70,95,.085),transparent 32%),
    rgba(255,255,255,.72);
  box-shadow:0 30px 90px rgba(24,61,80,.08);
}
.mfield-canvas:before,
.mfield-canvas:after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  border:1px dashed rgba(31,84,110,.14);
  border-radius:50%;
  pointer-events:none;
}
.mfield-canvas:before{width:58%;aspect-ratio:1.85/1}
.mfield-canvas:after{width:79%;aspect-ratio:2.15/1}
.mfield-grid{
  position:relative;
  z-index:1;
  display:grid;
  grid-template-columns:minmax(190px,1fr) minmax(340px,1.45fr) minmax(190px,1fr);
  grid-template-areas:
    "time programme authority"
    "semantics center resources"
    "progress local evidence";
  gap:12px;
}
.mfield-node,
.mfield-center{
  position:relative;
  min-height:154px;
  padding:19px;
  border:1px solid rgba(18,54,71,.10);
  border-radius:20px;
  background:rgba(250,253,254,.92);
  box-shadow:0 16px 42px rgba(26,65,83,.055);
}
.mfield-node small,
.mfield-center small{
  display:block;
  margin-bottom:9px;
  color:#5e8091;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.mfield-node h3{
  margin:0 0 8px;
  color:#183541;
  font-size:17px;
  letter-spacing:-.025em;
}
.mfield-node p{
  margin:0;
  color:#687f89;
  font-size:12.5px;
  line-height:1.5;
}
.mfield-node--time{grid-area:time}
.mfield-node--programme{grid-area:programme}
.mfield-node--authority{grid-area:authority}
.mfield-node--semantics{grid-area:semantics}
.mfield-node--resources{grid-area:resources}
.mfield-node--progress{grid-area:progress}
.mfield-node--local{grid-area:local}
.mfield-node--evidence{grid-area:evidence}
.mfield-center{
  grid-area:center;
  min-height:228px;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:center;
  text-align:center;
  border-color:rgba(33,109,145,.28);
  background:
    radial-gradient(circle at 50% 15%,rgba(92,194,236,.18),transparent 52%),
    linear-gradient(155deg,#0d2531 0%,#123746 100%);
  box-shadow:0 22px 65px rgba(8,39,54,.20);
}
.mfield-center small{color:#8ecde9}
.mfield-center strong{
  display:block;
  color:#fff;
  font-size:32px;
  line-height:1;
  letter-spacing:-.045em;
}
.mfield-center > span{
  display:block;
  margin:8px 0 14px;
  color:#b5ccd6;
  font-size:13px;
}
.mfield-center p{
  max-width:410px;
  margin:14px auto 0;
  color:#b8ccd5;
  font-size:12px;
  line-height:1.55;
}
.mfield-center__chips{
  display:flex;
  flex-wrap:wrap;
  justify-content:center;
  gap:6px;
}
.mfield-center__chips span{
  padding:7px 9px;
  border:1px solid rgba(255,255,255,.11);
  border-radius:999px;
  background:rgba(255,255,255,.055);
  color:#d9e7ec;
  font-size:10px;
  line-height:1;
}
.mfield-scope{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:12px;
  margin-top:16px;
}
.mfield-example{
  display:grid;
  grid-template-columns:minmax(210px,.9fr) 1.5fr;
  gap:22px;
  align-items:center;
  padding:20px 22px;
  border:1px solid rgba(15,51,67,.09);
  border-radius:20px;
  background:rgba(255,255,255,.72);
}
.mfield-example small{
  display:block;
  margin-bottom:6px;
  color:#67818e;
  font-size:9px;
  font-weight:800;
  letter-spacing:.13em;
  text-transform:uppercase;
}
.mfield-example h3{
  margin:0;
  color:#183541;
  font-size:21px;
  letter-spacing:-.035em;
}
.mfield-example__stats{
  display:grid;
  grid-template-columns:repeat(4,minmax(0,1fr));
  gap:8px;
}
.mfield-example__stats span{
  min-height:65px;
  padding:11px;
  border-radius:14px;
  background:#edf4f7;
  color:#637a85;
  font-size:10px;
  line-height:1.35;
}
.mfield-example__stats strong{
  display:block;
  margin-bottom:3px;
  color:#123241;
  font-size:21px;
  line-height:1;
  letter-spacing:-.035em;
}
.mfield-rule{
  display:grid;
  grid-template-columns:minmax(0,1fr) auto;
  gap:24px;
  align-items:center;
  margin-top:16px;
  padding:17px 20px;
  border:1px solid rgba(15,51,67,.09);
  border-radius:18px;
  background:#102b38;
  color:#dce8ed;
}
.mfield-rule p{
  margin:0;
  font-size:12.5px;
  line-height:1.55;
}
.mfield-rule strong{color:#fff}
.mfield-rule a{
  color:#a9dcff;
  font-size:11px;
  font-weight:800;
  text-decoration:none;
  white-space:nowrap;
}
.mfield-rule a:hover{text-decoration:underline}
@media (max-width:1060px){
  .mfield-head{grid-template-columns:1fr;gap:18px}
  .mfield-grid{
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "center center"
      "time programme"
      "semantics progress"
      "resources authority"
      "evidence local";
  }
  .mfield-canvas:before,.mfield-canvas:after{display:none}
  .mfield-scope{grid-template-columns:1fr}
}
@media (max-width:700px){
  .mfield{padding:56px 0 60px}
  .mfield-head{margin-bottom:22px}
  .mfield-head h2{font-size:clamp(32px,9vw,40px);line-height:1.04}
  .mfield-head p{font-size:14px;line-height:1.58}
  .mfield-canvas{padding:10px;border-radius:22px}
  .mfield-grid{
    grid-template-columns:1fr;
    grid-template-areas:
      "center"
      "programme"
      "semantics"
      "progress"
      "resources"
      "authority"
      "evidence"
      "time"
      "local";
    gap:8px;
  }
  .mfield-node,.mfield-center{min-height:0;padding:16px;border-radius:16px}
  .mfield-center{padding:24px 16px}
  .mfield-center strong{font-size:27px}
  .mfield-center p{font-size:11.5px}
  .mfield-node h3{font-size:16px}
  .mfield-node p{font-size:11.5px}
  .mfield-scope{gap:8px;margin-top:10px}
  .mfield-example{grid-template-columns:1fr;gap:12px;padding:16px;border-radius:16px}
  .mfield-example__stats{grid-template-columns:1fr 1fr;gap:6px}
  .mfield-example__stats span{min-height:58px;padding:9px}
  .mfield-rule{grid-template-columns:1fr;gap:10px;padding:15px}
}


/* V2 · semantic layer legend, context delta, anchor polish */
#mokslo-core,#mokslo-field,#pilot{scroll-margin-top:92px}
.mfield-legend{
  display:flex;
  flex-wrap:wrap;
  gap:8px 16px;
  align-items:center;
  margin:-6px 0 18px;
  padding:0 2px;
  color:#58717d;
  font-size:10px;
  font-weight:800;
  letter-spacing:.04em;
}
.mfield-legend span{
  display:inline-flex;
  align-items:center;
  gap:7px;
}
.mfield-legend i{
  width:8px;
  height:8px;
  border-radius:50%;
  box-shadow:0 0 0 4px rgba(20,57,75,.05);
}
.mfield-legend__source i{background:#4d9dcb}
.mfield-legend__subject i{background:#42a697}
.mfield-legend__local i{background:#d1a354}
.mfield-node--time,
.mfield-node--authority,
.mfield-node--evidence{
  border-top:3px solid rgba(77,157,203,.48);
}
.mfield-node--programme,
.mfield-node--semantics,
.mfield-node--resources,
.mfield-node--progress{
  border-top:3px solid rgba(66,166,151,.48);
}
.mfield-node--local{
  border-top:3px solid rgba(209,163,84,.58);
  background:linear-gradient(180deg,rgba(255,252,245,.96),rgba(250,253,254,.92));
}
.mfield-delta{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(340px,.95fr);
  gap:24px;
  align-items:center;
  margin-top:12px;
  padding:18px 20px;
  border:1px solid rgba(15,51,67,.09);
  border-radius:18px;
  background:rgba(255,255,255,.66);
}
.mfield-delta__copy small{
  display:block;
  margin-bottom:5px;
  color:#648290;
  font-size:9px;
  font-weight:800;
  letter-spacing:.14em;
}
.mfield-delta__copy strong{
  display:block;
  color:#173541;
  font-size:17px;
  letter-spacing:-.025em;
}
.mfield-delta__copy p{
  margin:5px 0 0;
  color:#667e89;
  font-size:11.5px;
  line-height:1.5;
}
.mfield-delta__bars{
  display:grid;
  gap:9px;
}
.mfield-delta__bars > div > span{
  display:flex;
  justify-content:space-between;
  gap:14px;
  margin-bottom:5px;
  color:#355564;
  font-size:10px;
  font-weight:800;
}
.mfield-delta__bars b{
  color:#123241;
  font-size:12px;
}
.mfield-delta__bars i{
  display:block;
  height:7px;
  overflow:hidden;
  border-radius:999px;
  background:#dfe9ed;
}
.mfield-delta__bars em{
  display:block;
  height:100%;
  border-radius:999px;
  background:linear-gradient(90deg,#4d9dcb,#42a697);
}
@media (max-width:700px){
  #mokslo-core,#mokslo-field,#pilot{scroll-margin-top:78px}
  .mfield-legend{
    display:grid;
    grid-template-columns:1fr;
    gap:6px;
    margin:-4px 0 13px;
    font-size:9.5px;
  }
  .mfield-delta{
    grid-template-columns:1fr;
    gap:13px;
    margin-top:8px;
    padding:14px;
    border-radius:15px;
  }
  .mfield-delta__copy strong{font-size:15px}
  .mfield-delta__copy p{font-size:10.8px}
}