/* Блок «Отчёты», вариант 3 — «От класса к задаче» (вторая версия, упрощённая).
   Одна история в три шага: класс (кружки-ученики) → отчёт одного ученика (его видят учитель и родитель)
   → одно задание, которое он решает заново с подсказкой ИИ. На компьютере шаги связаны линиями:
   кружок Миши → его отчёт, «Закрепить: часы» → задание «Часы».
   Готовое состояние — основное; reveal (is-seen) на планшете и компьютере один раз проигрывает историю. */

.r3{
  --r3-ink: #24243e;
  --r3-text: #4a4d66;
  --r3-mute: #66688a;
  --r3-vio: #6744d4;
  --r3-line: #e6e1f6;
  --r3-g: #1e9e4a; --r3-g-bg: #e1f4e7; --r3-g-tx: #13703a;
  --r3-y: #e8a013; --r3-y-bg: #fcf1d6; --r3-y-tx: #85560a;
  --r3-r: #dc4f3f; --r3-r-bg: #fce6e2; --r3-r-tx: #b23324;
  --r3-ease: cubic-bezier(.2, .75, .2, 1);
  --r3-pad: 20px;
  --r3-kid: 40px;
  position: relative; isolation: isolate;
  scroll-margin-top: 24px;
  padding: 56px 0 52px;
  color: var(--r3-ink);
  background: linear-gradient(#fff, #f7f5fd 150px, #f7f5fd calc(100% - 150px), #fff);
  font-variant-numeric: tabular-nums;
}
.r3-in{ position: relative; }

/* ───────── заголовок ───────── */
.r3-title{
  font-size: 31px; line-height: 1.12; font-weight: 800; letter-spacing: -.034em;
  color: var(--r3-ink); text-wrap: balance;
}
.r3-br{ display: none; }
.r3-nb{ white-space: nowrap; }
.r3-mk{
  --r3-k: #fbd163;
  margin: 0 -.12em 0 0; padding: 0 .12em 0 0;
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(var(--r3-k), var(--r3-k)) no-repeat 0 88% / 100% .44em;
}
.r3-mk-p{ --r3-k: #f6b0d7; }

/* ───────── шаги ───────── */
.r3-steps{ display: grid; row-gap: 54px; margin-top: 30px; }
.r3-step{ position: relative; display: grid; grid-template-columns: minmax(0, 1fr); align-content: start; }

.r3-who{
  display: flex; align-items: center; gap: 10px;
  font-size: 19px; line-height: 28px; font-weight: 800; letter-spacing: -.015em;
  color: var(--r3-ink);
}
.r3-num{
  flex: none; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 14.5px; font-weight: 800; letter-spacing: 0;
  color: #fff; background: var(--r3-vio);
}
/* на телефоне шаги связывает короткая линия между номерами */
.r3-step + .r3-step .r3-who::before{
  content: ""; position: absolute; left: 9px; top: -41px; width: 10px; height: 28px;
  background:
    radial-gradient(circle at 50% 5px, var(--r3-vio) 4.4px, transparent 5px),
    radial-gradient(circle at 50% calc(100% - 5px), var(--r3-vio) 4.4px, transparent 5px),
    linear-gradient(var(--r3-vio), var(--r3-vio)) 50% 0 / 2px 100% no-repeat;
}

/* ───────── карточка ───────── */
.r3-card{
  position: relative;
  display: flex; flex-direction: column;
  width: 100%; max-width: 420px; margin-top: 14px;
  padding: var(--r3-pad);
  border-radius: 24px;
  background: #fff;
  box-shadow: 0 0 0 1px var(--r3-line), 0 22px 44px -30px rgba(70, 48, 160, .42), 0 2px 6px -2px rgba(70, 48, 160, .08);
}
.r3-k{
  font-size: 11.5px; line-height: 16px; font-weight: 700; letter-spacing: .075em; text-transform: uppercase;
  color: var(--r3-mute); white-space: nowrap;
}
.r3-ring{
  position: absolute; inset: -5px; border-radius: inherit;
  border: 2px solid var(--r3-vio);
  box-shadow: 0 0 0 4px rgba(103, 68, 212, .13);
}
.r3-row{ display: flex; align-items: center; height: 46px; margin-top: 18px; }
.r3-foot{
  display: flex; align-items: center; flex-wrap: wrap; gap: 6px 14px;
  margin-top: 22px; padding-top: 13px; border-top: 1px solid var(--r3-line);
  font-size: 13px; line-height: 18px; font-weight: 600; color: var(--r3-text);
}
/* линии-связи есть только на компьютере; ниже — скрыты (не display:none, чтобы оживление не перезапускалось при смене ширины) */
.r3-link{ position: absolute; left: 0; top: 0; width: 1px; height: 1px; visibility: hidden; pointer-events: none; }

/* — 1. класс: ученики-кружки — */
.r3-kids{
  display: grid; grid-template-columns: repeat(6, var(--r3-kid)); justify-content: space-between;
  row-gap: 12px; margin-top: 18px;
}
.r3-kid{
  position: relative; display: grid; place-items: center;
  width: var(--r3-kid); height: var(--r3-kid); border-radius: 50%;
  font-size: 16px; line-height: 1; font-weight: 800; font-style: normal;
  color: var(--r3-g-tx); background: var(--r3-g-bg);
}
.r3-kid.r3-y{ color: var(--r3-y-tx); background: var(--r3-y-bg); }
.r3-kid.r3-r{ color: var(--r3-r-tx); background: var(--r3-r-bg); }
.r3-kid.r3-me{ color: #fff; background: var(--r3-y); }
.r3-tag{
  position: absolute; right: -7px; bottom: calc(100% + 9px); z-index: 1;
  padding: 3px 8px 4px; border-radius: 8px;
  font-size: 12px; line-height: 15px; font-weight: 700; font-style: normal; letter-spacing: .005em; white-space: nowrap;
  color: #fff; background: var(--r3-vio);
}
.r3-tag::after{
  content: ""; position: absolute; right: 17px; top: 100%; width: 10px; height: 6px; margin-top: -1px;
  background: var(--r3-vio); clip-path: polygon(0 0, 100% 0, 50% 100%);
}
.r3-legend{ flex-wrap: nowrap; justify-content: space-between; column-gap: 8px; font-size: 12.5px; }
.r3-legend span{ display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.r3-legend span::before{ content: ""; flex: none; width: 9px; height: 9px; border-radius: 50%; background: var(--r3-g); }
.r3-legend .r3-y::before{ background: var(--r3-y); }
.r3-legend .r3-r::before{ background: var(--r3-r); }

/* — 2. отчёт ученика — */
.r3-head{ display: flex; align-items: center; gap: 12px; height: 52px; margin-top: 12px; }
.r3-ava{
  position: relative; flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: grid; place-items: center;
  font-size: 23px; line-height: 1; font-weight: 800; color: #fff; background: var(--r3-y);
}
.r3-name{ min-width: 0; font-size: 22px; line-height: 26px; font-weight: 800; letter-spacing: -.025em; color: var(--r3-ink); white-space: nowrap; }
.r3-sum{ margin-left: auto; display: flex; align-items: baseline; gap: 5px; white-space: nowrap; font-size: 13.5px; font-weight: 700; color: var(--r3-mute); }
.r3-sum b{ font-size: 32px; line-height: 1; font-weight: 800; letter-spacing: -.04em; color: var(--r3-ink); }

.r3-bars{ display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 8px; height: 56px; margin-top: 20px; }
.r3-bars i{ position: relative; display: block; border-radius: 7px; background: #f1eef9; overflow: hidden; }
.r3-bars i::after{
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: var(--r3-h, 100%);
  border-radius: 7px; background: var(--r3-g); transform-origin: 50% 100%;
}
.r3-bars .r3-y::after{ background: var(--r3-y); }
.r3-bars .r3-r::after{ background: var(--r3-r); }
.r3-b4{ --r3-h: 40%; } .r3-b5{ --r3-h: 50%; } .r3-b6{ --r3-h: 60%; } .r3-b7{ --r3-h: 70%; } .r3-b8{ --r3-h: 80%; } .r3-b10{ --r3-h: 100%; }
.r3-c2 .r3-row{ justify-content: flex-end; }
.r3-fix{
  position: relative; display: inline-flex; align-items: center; gap: 5px;
  height: 40px; padding: 0 14px; border-radius: 12px;
  font-size: 14px; font-weight: 600; color: var(--r3-ink); background: var(--r3-r-bg); white-space: nowrap;
}
.r3-fix b{ font-weight: 800; color: var(--r3-r-tx); }
.r3-fix::after{
  content: ""; position: absolute; inset: -5px; border-radius: 16px;
  border: 2px solid var(--r3-vio);
  box-shadow: 0 0 0 4px rgba(103, 68, 212, .13);
}
.r3-eye{ flex: none; width: 20px; height: 14px; fill: none; stroke: var(--r3-vio); stroke-width: 2; stroke-linejoin: round; }
.r3-seen{ gap: 8px; }

/* — 3. задание — */
.r3-clock{ flex: none; width: 52px; height: 52px; fill: #f1edfd; stroke: var(--r3-vio); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.r3-clock path{ fill: none; }
.r3-hint{
  display: flex; align-items: flex-start; gap: 11px;
  margin-top: 14px; padding: 12px 14px 12px 12px;
  border-radius: 6px 18px 18px 18px;
  background: #f3f0fe;
}
.r3-hint b{
  flex: none; margin-top: 1px;
  padding: 0 7px; border-radius: 7px;
  font-size: 12px; line-height: 22px; font-weight: 800; letter-spacing: .04em;
  color: #fff; background: var(--r3-vio);
}
.r3-hint span{ font-size: 14px; line-height: 20px; font-weight: 600; color: var(--r3-ink); }
.r3-res{ margin-top: 14px; }
.r3-was{
  position: relative; flex: none; width: 46px; height: 46px; border-radius: 13px;
  display: grid; place-items: center;
  font-size: 23px; line-height: 1; font-weight: 800; color: var(--r3-r-tx); background: var(--r3-r-bg);
}
.r3-to{ flex: none; width: 30px; height: 16px; margin: 0 12px 0 14px; fill: none; stroke: #b9b3d6; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.r3-now{ display: flex; align-items: baseline; gap: 6px; white-space: nowrap; font-size: 14px; font-weight: 700; color: var(--r3-mute); }
.r3-now b{ font-size: 36px; line-height: 1; font-weight: 800; letter-spacing: -.045em; color: var(--r3-g-tx); }
.r3-mark{
  position: relative; flex: none; width: 44px; height: 44px; margin-left: auto; border-radius: 50%;
  background: var(--r3-g);
}
.r3-mark::before{ content: ""; position: absolute; inset: 0; border-radius: 50%; background: var(--r3-r); opacity: 0; }
.r3-mark svg{ position: absolute; inset: 9px; width: 26px; height: 26px; fill: none; stroke: #fff; stroke-width: 3.2; stroke-linecap: round; stroke-linejoin: round; }
.r3-x{ opacity: 0; }
.r3-v path{ stroke-dasharray: 1; stroke-dashoffset: 0; }
.r3-done{ color: var(--r3-g-tx); font-weight: 700; gap: 8px; }
.r3-done::before{
  content: ""; flex: none; width: 5px; height: 9px; margin: -3px 4px 0 5px;
  border: solid var(--r3-g); border-width: 0 2.4px 2.4px 0; rotate: 42deg;
}

/* ───────── текст шага ───────── */
.r3-txt{ margin-top: 20px; }
.r3-h{ font-size: 22px; line-height: 1.2; font-weight: 800; letter-spacing: -.024em; color: var(--r3-ink); text-wrap: balance; }
.r3-p{ margin-top: 9px; font-size: 15.5px; line-height: 1.5; color: var(--r3-text); }
.r3-a{
  display: inline-flex; align-items: center; gap: 9px; margin-top: 13px;
  font-size: 16.5px; line-height: 1.3; font-weight: 800; letter-spacing: -.012em;
  color: var(--r3-vio);
}
.r3-a span{ background: linear-gradient(currentColor, currentColor) no-repeat 0 100% / 100% 2px; padding-bottom: 3px; }
.r3-arr{ flex: none; width: 22px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; transition: transform .25s var(--r3-ease); }
.r3-a:focus-visible{ outline: 2px solid var(--r3-vio); outline-offset: 4px; border-radius: 4px; }

@media (hover: hover){
  .r3-a:hover .r3-arr{ transform: translateX(5px); }
  .r3-a:hover{ color: #5233b8; }
}

@media (max-width: 374px){
  .r3{ --r3-pad: 18px; --r3-kid: 36px; }
  .r3-title{ font-size: 29px; }
  .r3-legend{ font-size: 12px; }
  .r3-legend span{ gap: 4px; }
}

/* ───────── планшет: слева текст, справа карточка; карточки связаны вертикальной линией ───────── */
@media (min-width: 700px){
  .r3{ --r3-pad: 26px; --r3-kid: 44px; padding: 76px 0 72px; }
  .r3-title{ font-size: 40px; line-height: 1.1; }
  .r3-br{ display: inline; }
  .r3-steps{ row-gap: 40px; margin-top: 44px; }
  .r3-step{
    grid-template-columns: minmax(0, 1fr) 336px; grid-template-rows: 1fr auto auto 1fr;
    grid-template-areas: ". card" "who card" "txt card" ". card"; column-gap: 44px;
  }
  .r3-who{ grid-area: who; font-size: 21px; }
  .r3-txt{ grid-area: txt; margin-top: 16px; }
  /* общая сетка высот: аватар/значок на 80px, строка «Закрепить» и «4 → 10» — на 231px от верха карточки */
  .r3-card{ grid-area: card; margin-top: 0; height: 330px; }
  .r3-kids{ row-gap: 14px; margin-top: 16px; }
  .r3-bars{ margin-top: 20px; }
  .r3-c2 .r3-row{ margin-top: 26px; }
  .r3-hint{ height: 74px; }
  .r3-foot{ margin-top: auto; }
  .r3-step + .r3-step .r3-who::before{ content: none; }
  .r3-step + .r3-step .r3-card::before{
    content: ""; position: absolute; left: 50%; bottom: 100%; width: 10px; height: 40px; margin-left: -5px;
    background:
      radial-gradient(circle at 50% 5px, var(--r3-vio) 4.4px, transparent 5px),
      radial-gradient(circle at 50% calc(100% - 5px), var(--r3-vio) 4.4px, transparent 5px),
      linear-gradient(var(--r3-vio), var(--r3-vio)) 50% 0 / 2px 100% no-repeat;
  }
  .r3-h{ font-size: 25px; }
  .r3-p{ font-size: 16px; line-height: 1.55; }
}
@media (min-width: 900px){
  .r3-step{ column-gap: 72px; }
  .r3-who, .r3-txt{ max-width: 500px; }
}

/* ───────── компьютер: три шага в ряд, связи — горизонтальные линии ───────── */
@media (min-width: 1200px){
  .r3{ padding: 84px 0 80px; }
  .r3-title{ font-size: 46px; line-height: 1.08; letter-spacing: -.036em; }
  .r3-steps{ grid-template-columns: repeat(3, 336px); column-gap: 56px; justify-content: center; row-gap: 0; margin-top: 46px; }
  .r3-step{ grid-template-columns: minmax(0, 1fr); grid-template-rows: none; grid-template-areas: none; }
  .r3-who, .r3-txt, .r3-card{ grid-area: auto; max-width: none; }
  .r3-card{ margin-top: 16px; }
  .r3-step + .r3-step .r3-card::before{ content: none; }
  .r3-txt{ margin-top: 30px; padding-right: 8px; }
  .r3-h{ font-size: 24px; }

  .r3-link{
    left: calc(100% - 1px); top: 50%; z-index: 2; visibility: visible;
    width: 110px; height: 12px; margin-top: -6px; overflow: visible;
  }
  .r3-fix .r3-link{ left: calc(100% + 4px); width: 105px; }
  .r3-link path{ fill: none; stroke: var(--r3-vio); stroke-width: 2.25; stroke-dasharray: 1; stroke-dashoffset: 0; }
  .r3-link circle{ fill: var(--r3-vio); stroke: #fff; stroke-width: 2; transform-box: fill-box; transform-origin: 50% 50%; }
}

/* ───────── история при появлении: один раз, ≈1,6 с; на телефоне и при reduced-motion — сразу готовое ───────── */
.r3-kids > :nth-child(6n+2){ --r3-i: 1; } .r3-kids > :nth-child(6n+3){ --r3-i: 2; } .r3-kids > :nth-child(6n+4){ --r3-i: 3; }
.r3-kids > :nth-child(6n+5){ --r3-i: 4; } .r3-kids > :nth-child(6n+6){ --r3-i: 5; }
.r3-kids > :nth-child(n+7){ --r3-j: 1; } .r3-kids > :nth-child(n+13){ --r3-j: 2; }
.r3-bars > :nth-child(2){ --r3-i: 1; } .r3-bars > :nth-child(3){ --r3-i: 2; } .r3-bars > :nth-child(4){ --r3-i: 3; }
.r3-bars > :nth-child(5){ --r3-i: 4; } .r3-bars > :nth-child(6){ --r3-i: 5; } .r3-bars > :nth-child(7){ --r3-i: 6; } .r3-bars > :nth-child(8){ --r3-i: 7; }
.r3.is-seen .r3-kid{ animation: r3-pop .26s var(--r3-ease) calc(var(--r3-i, 0) * 24ms + var(--r3-j, 0) * 40ms + 150ms) both; }
.r3.is-seen .r3-me .r3-ring{ animation: r3-ring .26s var(--r3-ease) .55s both; }
.r3.is-seen .r3-tag{ animation: r3-fade .18s linear .6s both; }
.r3.is-seen .r3-link circle{ animation: r3-pop .2s var(--r3-ease) .64s both; }
.r3.is-seen .r3-link path{ animation: r3-draw .22s cubic-bezier(.5, 0, .2, 1) .68s both; }
.r3.is-seen .r3-link .r3-end{ animation-delay: .86s; }
.r3.is-seen .r3-ava .r3-ring{ animation: r3-ring .26s var(--r3-ease) .86s both; }
.r3.is-seen .r3-bars i::after{ animation: r3-grow .32s var(--r3-ease) calc(var(--r3-i, 0) * 30ms + .9s) both; }
.r3.is-seen .r3-fix::after{ animation: r3-ring .26s var(--r3-ease) 1.2s both; }
.r3.is-seen .r3-fix .r3-link circle{ animation-delay: 1.26s; }
.r3.is-seen .r3-fix .r3-link path{ animation-delay: 1.3s; }
.r3.is-seen .r3-fix .r3-link .r3-end{ animation-delay: 1.48s; }
.r3.is-seen .r3-mark::before{ animation: r3-out .16s linear 1.55s both; }
.r3.is-seen .r3-x{ animation: r3-out .12s linear 1.55s both; }
.r3.is-seen .r3-v path{ animation: r3-draw .22s cubic-bezier(.5, 0, .2, 1) 1.58s both; }
@keyframes r3-fade{ from{ opacity: 0; } }
@keyframes r3-out{ from{ opacity: 1; } to{ opacity: 0; } }
@keyframes r3-ring{ from{ opacity: 0; transform: scale(1.5); } }
@keyframes r3-pop{ from{ opacity: 0; transform: scale(.4); } }
@keyframes r3-grow{ from{ transform: scaleY(0); } }
@keyframes r3-draw{ from{ stroke-dashoffset: 1; } }

@media (min-width: 240px) and (max-width: 699px), (prefers-reduced-motion: reduce){
  .r3.is-seen .r3-kid, .r3.is-seen .r3-ring, .r3.is-seen .r3-tag, .r3.is-seen .r3-fix::after, .r3.is-seen .r3-bars i::after,
  .r3.is-seen .r3-link circle, .r3.is-seen .r3-link path, .r3.is-seen .r3-mark::before, .r3.is-seen .r3-x, .r3.is-seen .r3-v path{ animation: none; }
}
@media (prefers-reduced-motion: reduce){
  .r3-arr{ transition: none; }
}

/* Один заголовок у шага: «Учителю — отчёт и следующий шаг…»; кому — цветом, как пометки ручкой. */
.r3-role{ color: var(--r3-vio); white-space: nowrap; }