/* Макет интерфейса EsepUp (HTML/CSS). Все размеры в em: макет масштабируется как целое. */
.mockwrap { container: mock / inline-size; width: 100%; }
.mock {
  position: relative;
  font-size: clamp(9px, calc(100cqw / 54), 17px);
  line-height: 1.35;
  color: var(--color-navy);
  font-variant-numeric: lining-nums tabular-nums;
}
.mock__win {
  background: var(--color-white);
  border: 1px solid var(--color-mist);
  border-radius: 1.1em;
  overflow: hidden;
  box-shadow: 0 2.4em 4.4em -2.2em rgba(15, 42, 107, .26), 0 .2em .7em rgba(15, 42, 107, .06);
}
.mock__bar {
  display: flex;
  align-items: center;
  gap: .5em;
  height: 2.7em;
  padding: 0 1.1em;
  background: var(--color-ivory);
  border-bottom: 1px solid var(--color-mist);
}
.mock__bar i { width: .7em; height: .7em; border-radius: 50%; background: var(--color-mist); }
.mock__tab { margin-left: 1em; font-size: .85em; font-weight: 500; color: var(--color-slate); }

.mock__body { display: grid; grid-template-columns: 8.6em minmax(0, 1fr) 14.8em; }

.mock__side { padding: 1.2em .8em; border-right: 1px solid var(--color-mist); }
.mock__brand { display: flex; align-items: center; gap: .55em; margin: 0 0 1.4em .4em; }
.mock__brand svg { width: 1.5em; height: 1.5em; flex: none; }
.mock__brand b { font-family: var(--font-heading); font-size: 1.3em; line-height: 1; font-weight: 700; }
.mock__side li {
  padding: .62em .7em;
  margin-bottom: .15em;
  border-radius: .6em;
  font-size: .88em;
  font-weight: 500;
  color: var(--color-slate);
  white-space: nowrap;
}
.mock__side li.is-on { background: var(--color-info-bg); color: var(--color-electric); font-weight: 600; }

.mock__main { min-width: 0; padding: 1.15em 1.2em .6em; }
.mock__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1em; }
.mock__title b { display: block; font-size: 1.15em; line-height: 1.2; font-weight: 700; }
.mock__stat { position: relative; display: block; height: 1.5em; margin-top: .15em; font-size: .8em; color: var(--color-slate); }
.mock__stat small { position: absolute; left: 0; top: 0; white-space: nowrap; font-size: 1em; opacity: 0; transform: translateY(.3em); transition: opacity .5s var(--ease), transform .5s var(--ease); }
.mock[data-step="1"] .s1, .mock[data-step="2"] .s2, .mock[data-step="3"] .s3, .mock[data-step="4"] .s4 { opacity: 1; transform: none; }
.mock[data-step="4"] .s4 { color: #137650; font-weight: 600; }

.mock__act {
  position: relative;
  flex: none;
  display: grid;
  place-items: center;
  min-width: 11.2em;
  height: 2.5em;
  padding: 0 1em;
  border-radius: .65em;
  background: var(--color-electric);
  color: var(--color-white);
  font-size: .84em;
  font-weight: 600;
  white-space: nowrap;
  transition: background-color .5s var(--ease), color .5s var(--ease);
}
.mock__act > span { grid-area: 1 / 1; display: inline-flex; align-items: center; gap: .45em; opacity: 0; transform: translateY(.3em); transition: opacity .45s var(--ease), transform .45s var(--ease); }
.mock[data-step="1"] .a1, .mock[data-step="2"] .a2, .mock[data-step="3"] .a3, .mock[data-step="4"] .a4 { opacity: 1; transform: none; }
.mock[data-step="2"] .mock__act { background: #E8ECF3; color: var(--color-slate); }
.mock[data-step="4"] .mock__act { background: var(--color-success-bg); color: #137650; }

.mock__prog { height: .22em; margin: .95em 0 .5em; border-radius: 99px; background: #EEF1F6; overflow: hidden; }
.mock__prog i { display: block; height: 100%; border-radius: inherit; background: var(--color-electric); transform: scaleX(0); transform-origin: left; transition: transform .5s var(--ease), background-color .6s; }
.mock[data-step="2"] .mock__prog i { transform: scaleX(1); transition-duration: 1.7s; }
.mock[data-step="3"] .mock__prog i { transform: scaleX(1); }
.mock[data-step="4"] .mock__prog i { transform: scaleX(1); background: var(--color-success); }

.mock__table { margin-inline: -1.2em; }
.tr {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 6.5em 7.8em;
  align-items: center;
  gap: .9em;
  min-height: 3.35em;
  padding: .45em 1.2em;
  border-bottom: 1px solid #EDF0F5;
  transition: background-color .6s var(--ease), box-shadow .6s var(--ease);
}
.tr.th {
  min-height: 0;
  padding-block: .55em .5em;
  font-size: .66em;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--color-slate);
}
.tr .r { text-align: right; }
.c-name { min-width: 0; }
.c-name b, .c-name small { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.c-name b { font-size: .95em; font-weight: 600; }
.c-name small { font-size: .76em; color: var(--color-slate); }
.c-sum { text-align: right; font-size: .92em; font-weight: 600; white-space: nowrap; }
.c-sum--in { color: #137650; }

.c-st { position: relative; display: block; height: 2.6em; }
.st {
  position: absolute;
  left: 0;
  top: .1em;
  display: inline-flex;
  align-items: center;
  padding: .55em 1em;
  border-radius: 99px;
  font-style: normal;
  font-size: .72em;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.4em);
  transition: opacity .45s var(--ease), transform .45s var(--ease);
  transition-delay: calc(var(--i) * .15s);
}
.st-q { background: #EEF1F6; color: var(--color-slate); }
.st-p { background: var(--color-mist); color: var(--color-navy); }
.st-s { background: var(--color-info-bg); color: var(--color-electric); }
.st-ok { background: var(--color-success-bg); color: #137650; }
.st-p::before {
  content: "";
  width: .85em; height: .85em;
  margin-right: .5em;
  border: .16em solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
}
.mock[data-step="2"] .st-p::before { animation: mock-spin .8s linear infinite; }
@keyframes mock-spin { to { transform: rotate(360deg); } }
.mock[data-step="1"] .st-q, .mock[data-step="2"] .st-p, .mock[data-step="3"] .st-s, .mock[data-step="4"] .st-ok { opacity: 1; transform: none; }

.c-doc {
  position: absolute;
  left: .3em;
  top: 2.05em;
  font-size: .68em;
  font-weight: 500;
  color: var(--color-slate);
  white-space: nowrap;
  opacity: 0;
  transition: opacity .5s var(--ease);
  transition-delay: calc(var(--i) * .15s);
}
.mock[data-step="3"] .c-doc, .mock[data-step="4"] .c-doc { opacity: 1; }
.mock[data-step="3"] .mock__table .tr:nth-child(4) { background: #F3F6FF; box-shadow: inset .2em 0 0 var(--color-electric); }

/* Колонка найденных документов */
.mock__docs { padding: 1.15em 1em; border-left: 1px solid var(--color-mist); background: #FCFAF6; }
.mock__docs-h { margin-bottom: .95em; font-size: .66em; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--color-slate); }
.dcard {
  display: block;
  margin-bottom: .8em;
  padding: .85em .9em .9em;
  border: 1px solid var(--color-mist);
  border-radius: .85em;
  background: var(--color-white);
  opacity: 0;
  transform: translateX(1.4em);
  transition: opacity .6s var(--ease), transform .7s var(--ease), border-color .6s;
  transition-delay: calc(var(--i) * .26s + .15s);
}
.mock[data-step="3"] .dcard, .mock[data-step="4"] .dcard { opacity: 1; transform: none; }
.mock[data-step="4"] .dcard { border-color: #BFE6D4; transition-delay: calc(var(--i) * .15s); }
.dcard__top { display: flex; align-items: center; gap: .5em; }
.dtype { padding: .3em .65em; border-radius: .4em; background: var(--color-info-bg); color: var(--color-electric); font-size: .68em; font-weight: 700; line-height: 1; }
.dnum { font-size: .76em; color: var(--color-slate); font-weight: 500; }
.dok {
  margin-left: auto;
  display: grid;
  place-items: center;
  width: 1.55em; height: 1.55em;
  border-radius: 50%;
  background: var(--color-success);
  color: var(--color-white);
  opacity: 0;
  transform: scale(.4);
  transition: opacity .4s var(--ease), transform .5s var(--ease);
  transition-delay: calc(var(--i) * .15s + .2s);
}
.dok svg { width: .8em; height: .8em; }
.mock[data-step="4"] .dok { opacity: 1; transform: none; }
.dcard__name { display: block; margin-top: .6em; font-size: .88em; font-weight: 600; }
.dcard__sum { display: block; font-size: 1.05em; font-weight: 700; }
.dcard__why { display: block; margin-top: .3em; font-size: .72em; line-height: 1.35; color: var(--color-slate); }

/* Заглушки до появления документов */
.dghosts { position: absolute; inset: 3.7em 1em 1em; display: flex; flex-direction: column; gap: .8em; transition: opacity .5s var(--ease); }
.dghost {
  flex: 0 0 7.4em;
  border: 1px dashed #D5DCE8;
  border-radius: .85em;
  background: repeating-linear-gradient(135deg, transparent 0 .5em, rgba(220, 227, 236, .35) .5em 1em);
}
.mock[data-step="3"] .dghosts, .mock[data-step="4"] .dghosts { opacity: 0; }
.mock__docs { position: relative; }

/* Плавающий счётчик */
.mock__count {
  position: absolute;
  left: 1.6em;
  bottom: -1.4em;
  display: inline-flex;
  align-items: center;
  gap: .5em;
  padding: .7em 1.15em;
  border: 1px solid var(--color-mist);
  border-radius: 99px;
  background: var(--color-white);
  box-shadow: 0 .9em 1.8em -.9em rgba(15, 42, 107, .3);
  font-size: .88em;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  transform: translateY(.7em);
  transition: opacity .6s var(--ease), transform .7s var(--ease);
}
.mock__count svg { width: 1.45em; height: 1.45em; padding: .3em; border-radius: 50%; background: var(--color-success); color: var(--color-white); }
.mock__count .n { min-width: .7em; text-align: center; }
.mock[data-step="3"] .mock__count, .mock[data-step="4"] .mock__count { opacity: 1; transform: none; }
.mockcap { margin-top: 2.4rem; }

/* Средний размер: без бокового меню */
@container mock (max-width: 619px) {
  .mock { font-size: clamp(9px, calc(100cqw / 46), 17px); }
  .mock__body { grid-template-columns: minmax(0, 1fr) 14.8em; }
  .mock__side { display: none; }
}
/* Узкий размер: колонка документов под таблицей, пять строк */
@container mock (max-width: 459px) {
  .mock { font-size: calc(100cqw / 29); }
  .mock__body { grid-template-columns: minmax(0, 1fr); }
  .mock__docs { border-left: 0; border-top: 1px solid var(--color-mist); }
  .dcard:nth-of-type(n+3), .dghost:nth-of-type(n+2) { display: none; }
  .dghosts { inset: 3.4em 1em auto; }
  .mock__table .tr:nth-child(n+7) { display: none; }
  .mock__act { min-width: 9.4em; }
  .tr { grid-template-columns: minmax(0, 1fr) 6.2em 7.5em; gap: .5em; }
  .mock__count { left: 1em; }
  .mock__tab { display: none; }
}

@media (prefers-reduced-motion: reduce) {
  .mock *, .mock { transition: none !important; animation: none !important; }
}
html:not(.fx) .mock *, html:not(.fx) .mock { transition: none !important; animation: none !important; }