/*
 * Раздел крови — язык мобильного приложения на вебе.
 *
 * Тёплый серый фон, белые карточки на 70 % со скруглением 20, эритроцит в
 * герое, чёрные пилюли главных действий, пастельная тройка статусов. Общее для
 * списка сдач (tests.html) и маркеров сдачи (markers.html) лежит здесь, чтобы
 * два экрана одного раздела не разошлись в мелочах.
 *
 * Шрифт — тот же, что во всём кабинете. Антиква из макета не подключается:
 * там, где она стоит, — Helvetica 300 теми же кеглями.
 *
 * Все селекторы — от `.bl-page`: оболочка кабинета рисуется в тот же документ,
 * и голые `.card` или `.row` задели бы её (см. tools/check-chrome-css.py).
 */

/* Тёплый серый фон — у всех страниц на этом языке. */
body[data-page="tests"], body[data-page="markers"],
body[data-page="upload"], body[data-page="marker"] { background:#ECECEC; }
/* Полотно раздела крови начинается от верхнего края колонки: герой — картинка
   во всю ширину, и светлая полоса оболочки над ней читалась бы рамкой. */
body[data-page="tests"] .colFull,
body[data-page="markers"] .colFull { padding-top:0; }

.bl-screen { width:100%; }

/* Атрибут `hidden` обязан прятать и то, у чего есть свой display: плашки и
   карточки раздела — флексы, и без этого правила спрятанное оставалось бы на
   экране. */
.bl-page [hidden], .bl-page[hidden] { display:none !important; }

.bl-page {
  --bl-bg:#ECECEC;
  --bl-ink:#1A1A1A;
  --bl-grey:#8A8A8A;
  --bl-grey-2:#7C7C7C;
  --bl-card:rgba(255,255,255,.7);
  --bl-card-h:rgba(255,255,255,.94);
  --bl-shadow:0 1px 2px rgba(0,0,0,.03);
  --bl-line:rgba(34,34,31,.15);
  --bl-opt:#8FD3A5; --bl-norm:#F2D48A; --bl-out:#F2A3B5;
  --bl-opt-hot:#4C8A62; --bl-norm-hot:#9A8032; --bl-out-hot:#C06A83;
  position:relative; min-height:100%;
  background:var(--bl-bg); color:var(--bl-ink);
  font-variant-numeric:tabular-nums;
}

/* ---- герой ---------------------------------------------------------------- */

.bl-page .bl-hero { position:relative; height:320px; flex:none; }
.bl-page .bl-hero.short { height:280px; }
.bl-page .bl-hero .pic { position:absolute; inset:0; overflow:hidden; }
.bl-page .bl-hero .pic::before {
  content:''; position:absolute; inset:0;
  background:url(blood-cell.jpg) 64% 46% / cover no-repeat;
}
/* Две растяжки в цвет полотна: снизу — под заголовок, слева — под дату. Без
   них картинка обрезалась бы краем, а не растворялась. */
.bl-page .bl-hero .pic::after {
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(to top, var(--bl-bg) 1%, rgba(236,236,236,.55) 34%, rgba(236,236,236,0) 82%),
    linear-gradient(to right, var(--bl-bg) 3%, rgba(236,236,236,.45) 26%, rgba(236,236,236,0) 52%);
}
.bl-page .bl-hero .foot {
  position:absolute; left:48px; right:48px; bottom:26px; z-index:1;
  display:flex; align-items:flex-end; justify-content:space-between; gap:24px;
}
/* Герой маркеров ниже героя списка на 40 px — и картинка стоит чуть выше, а
   подпись чуть ниже: кадр E1 макета. */
.bl-page .bl-hero.short .foot { bottom:22px; }
.bl-page .bl-hero.short .pic::before { background-position:64% 44%; }
.bl-page .bl-hero .l { display:flex; flex-direction:column; gap:4px; min-width:0; }
.bl-page .bl-hero .when { font-size:13px; color:var(--bl-grey-2); }
.bl-page .bl-hero h1 {
  margin:0; font-size:56px; font-weight:300; line-height:1.05; letter-spacing:-.02em;
  color:var(--bl-ink);
}
.bl-page .bl-hero .r { display:flex; align-items:center; gap:18px; padding-bottom:4px; flex:none; }
.bl-page .bl-hero .count { font-size:14px; color:var(--bl-grey-2); }
.bl-page .bl-hero .top { position:absolute; right:48px; top:28px; z-index:1; }

/* ---- главная пилюля ------------------------------------------------------- */

/* Высота строки — обычная, как в макете: с зажатой до 1 пилюля выходила на
   3 px ниже нарисованной. */
.bl-page .bl-pill {
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
  background:#111; color:#fff; font:inherit; font-size:15px; line-height:normal;
  padding:14px 30px; border:0; border-radius:999px; cursor:pointer;
  text-decoration:none; white-space:nowrap;
}
.bl-page .bl-pill:hover { background:#2A2A2A; color:#fff; }

/* ---- тело ----------------------------------------------------------------- */

.bl-page .bl-body { display:flex; flex-direction:column; gap:24px; padding:28px 48px 44px; }

.bl-page .bl-card {
  background:var(--bl-card); border-radius:20px; box-shadow:var(--bl-shadow);
}

/* Полоса состава: три сегмента по статусам, скругления только по краям. */
.bl-page .bl-segs { display:flex; gap:3px; height:8px; }
.bl-page .bl-segs i { display:block; border-radius:3px; min-width:3px; }
.bl-page .bl-segs i:first-child { border-radius:999px 3px 3px 999px; }
.bl-page .bl-segs i:last-child { border-radius:3px 999px 999px 3px; }
.bl-page .bl-segs i:only-child { border-radius:999px; }

.bl-page .bl-legend { display:flex; align-items:center; flex-wrap:wrap; gap:8px 26px; }
.bl-page .bl-legend span { display:flex; align-items:center; gap:8px; font-size:14px; color:#4A4A4A; }
.bl-page .bl-legend i { width:7px; height:7px; border-radius:999px; flex:none; display:block; }

/* Пилюля референса: нарушенная граница — горячим цветом статуса. Пунктир —
   когда референса в бланке нет: так пустота видна, а не маскируется. */
.bl-page .bl-ref {
  display:inline-flex; align-items:center; gap:5px; white-space:nowrap;
  border:1px solid var(--bl-line); border-radius:999px; padding:4px 12px;
  font-size:13px; color:var(--bl-grey);
}
.bl-page .bl-ref.none { border-style:dashed; border-color:rgba(34,34,31,.25); }

.bl-page .bl-err {
  border-radius:16px; background:rgba(242,163,181,.2); color:#8E3C49;
  padding:14px 18px; font-size:13px; line-height:1.5;
}
.bl-page .bl-quiet { font-size:13px; color:var(--bl-grey); padding:6px 4px; }

/* ---- пусто ---------------------------------------------------------------- */

.bl-page .bl-empty {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:18px; text-align:center; padding:48px 0 88px;
}
.bl-page .bl-empty .cell {
  width:320px; height:320px; flex:none;
  background:url(blood-cell.jpg) center / cover no-repeat; mix-blend-mode:multiply;
  -webkit-mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 64%);
  mask-image:radial-gradient(circle at 50% 50%, #000 40%, transparent 64%);
}
.bl-page .bl-empty .t {
  font-size:56px; font-weight:300; line-height:1.12; letter-spacing:-.02em; max-width:520px;
}
.bl-page .bl-empty .m { font-size:15px; color:var(--bl-grey); max-width:460px; line-height:1.5; }
.bl-page .bl-empty .bl-pill { margin-top:14px; font-size:16px; padding:18px 64px; }


/* ---- общее для экранов раздела ------------------------------------------- */

/* Заголовок экрана. В макете он антиквой; антиква не подключается — тот же
   кегль Helvetica 300, как в герое. */
.bl-page .bl-h1 {
  margin:0; font-size:40px; font-weight:300; line-height:1.05; letter-spacing:-.01em;
  color:var(--bl-ink);
}

/* Капслок-подпись: разделы врезки, шапки групп, колонки печати. */
.bl-page .bl-caps {
  font-size:11px; letter-spacing:.18em; text-transform:uppercase;
  color:rgba(34,34,31,.45);
}

/* Шапка группы: капс слева, счёт и шеврон справа. Воздух — из макета: 32 над
   первой группой, 40 над следующими, 12 под шапкой. */
.bl-page .bl-grp {
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  padding:40px 16px 12px; cursor:pointer; background:none; border:0; width:100%;
  font:inherit; text-align:left; color:inherit;
}
.bl-page .bl-grp:first-child, .bl-page .bl-grp.first { padding-top:32px; }
.bl-page .bl-grp:hover { opacity:.65; }
.bl-page .bl-grp .r { display:flex; align-items:center; gap:9px; }
.bl-page .bl-grp .n { font-size:11px; letter-spacing:.14em; color:rgba(34,34,31,.45); }
.bl-page .bl-grp .cv {
  font-size:12px; color:rgba(34,34,31,.45); line-height:1;
  transition:transform 220ms cubic-bezier(.2,.7,.2,1);
}
.bl-page .bl-grp[aria-expanded="false"] .cv { transform:rotate(-90deg); }
.bl-page .bl-grp .h { font-size:11px; letter-spacing:.18em; text-transform:uppercase; color:#22221F; }

/* Светлая пилюля: белая в покое, чёрная под курсором. Главное действие там,
   где полотно уже серое, а чёрная пилюля стоит выше по экрану. */
.bl-page .bl-pill.light { background:#fff; color:var(--bl-ink); box-shadow:0 4px 18px rgba(0,0,0,.08); }
.bl-page .bl-pill.light:hover { background:#111; color:#fff; }

/* ---- ход чтения ----------------------------------------------------------- */

/* Процентов нет: сделанное — галочкой, текущее — дышащей точкой, будущее —
   полым кольцом. Проценты пришлось бы выдумывать: сколько времени займёт
   распознавание страницы, неизвестно до её конца. */
.bl-page .bl-steps { display:flex; flex-direction:column; gap:11px; align-items:flex-start; }
.bl-page .bl-steps .st { display:flex; align-items:center; gap:10px; }
.bl-page .bl-steps .mk {
  width:9px; height:9px; flex:none; margin:0 4.5px; border-radius:999px;
  box-shadow:inset 0 0 0 1.4px #C2C2C2;
}
.bl-page .bl-steps .st.now .mk {
  background:var(--bl-ink); box-shadow:none;
  animation:bl-breathe 1600ms ease-in-out infinite;
}
.bl-page .bl-steps .st.done .mk {
  width:18px; height:18px; margin:0; border-radius:999px; box-shadow:none;
  background:rgba(143,211,165,.35); color:#3E7A55; font-size:11px;
  display:flex; align-items:center; justify-content:center;
}
.bl-page .bl-steps .lb { font-size:15px; color:#3A3A3A; }
.bl-page .bl-steps .st.later .lb { color:var(--bl-grey); }

@keyframes bl-breathe { 0%, 100% { opacity:1; transform:scale(1); } 50% { opacity:.45; transform:scale(.82); } }

/*
 * Полоса проходит за первую половину круга и всю вторую стоит: в макете так и
 * написано — проезд, потом пауза. Пауза заодно прячет возврат: в крайних
 * положениях полоса за пределами надписи, и начало нового круга ничем не
 * отличается от конца прежнего.
 */
@keyframes bl-shine {
  0%   { background-position:100% 0; animation-timing-function:cubic-bezier(.33,0,.2,1); }
  50%  { background-position:0 0; animation-timing-function:linear; }
  100% { background-position:0 0; }
}

/* Заголовок, по которому ездит светлая полоса: ожидание без полосы прогресса.
   Тёмные поля градиента шире надписи (по 120 % её ширины на каждое), поэтому в
   покое надпись сплошь тёмная. С прежними 260 % и узкими полями на краю круга
   у надписи оставался подсвеченный бок, и возврат был виден рывком. */
.bl-page .bl-shine {
  background-image:linear-gradient(100deg,
    #1A1A1A 0%, #1A1A1A 40%, #BDBDBD 46%, #F2F2F2 50%, #BDBDBD 54%, #1A1A1A 60%, #1A1A1A 100%);
  background-size:300% 100%; background-position:0 0; background-repeat:no-repeat;
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent; color:transparent;
  animation:bl-shine 2200ms infinite;
}
@media (prefers-reduced-motion:reduce) {
  .bl-page .bl-shine { animation:none; -webkit-text-fill-color:var(--bl-ink); color:var(--bl-ink); }
  .bl-page .bl-steps .st.now .mk { animation:none; }
}

/* ---- шторка отчёта врачу -------------------------------------------------- */

/*
 * Панель живёт на `body`, а не внутри колонки: полотно под ней размывается
 * фильтром, а `filter` на предке делает его контейнером для `position:fixed` —
 * панель уехала бы вместе с размытием. Поэтому токены объявлены тут заново:
 * наследовать от `.bl-page` неоткуда.
 */
.bl-share, .bl-share-veil {
  --bl-ink:#1A1A1A; --bl-grey:#8A8A8A;
  font-variant-numeric:tabular-nums;
}
.bl-share[hidden], .bl-share [hidden], .bl-share-veil[hidden] { display:none !important; }

.bl-share-veil { position:fixed; inset:0; z-index:60; background:rgba(24,24,24,.3); }
body.bl-share-open .colFull { filter:blur(7px); }

.bl-share {
  position:fixed; right:0; top:0; bottom:0; width:480px; max-width:100%; z-index:61;
  background:#F1F1F1; box-shadow:-24px 0 60px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:18px; padding:26px 24px; overflow-y:auto;
  color:var(--bl-ink);
}
.bl-share .hd { display:flex; align-items:center; justify-content:space-between; gap:16px; flex:none; }
.bl-share .hd .t { font-size:28px; font-weight:300; line-height:1.1; }
.bl-share .x {
  width:34px; height:34px; flex:none; border:0; border-radius:999px; background:#fff;
  font:inherit; font-size:15px; color:var(--bl-ink); cursor:pointer;
  display:flex; align-items:center; justify-content:center;
}
.bl-share .x:hover { background:#111; color:#fff; }

.bl-share .box {
  background:rgba(255,255,255,.7); border-radius:20px; padding:18px 20px;
  display:flex; flex-direction:column; gap:11px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.bl-share .box .ttl { font-size:16px; }
.bl-share .box .li { display:flex; align-items:center; gap:9px; }
.bl-share .box .li i { width:6px; height:6px; flex:none; border-radius:999px; background:rgba(34,34,31,.28); }
.bl-share .box .li span { font-size:14px; color:#6E6E6E; text-wrap:pretty; }

.bl-share .tog {
  display:flex; flex-direction:column; gap:7px; width:100%; text-align:left;
  background:rgba(255,255,255,.7); border:0; border-radius:20px; padding:16px 18px;
  font:inherit; color:inherit; cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.bl-share .tog .hd2 { display:flex; align-items:center; justify-content:space-between; gap:14px; }
.bl-share .tog .hd2 span { font-size:15px; }
.bl-share .tog .note { font-size:12.5px; line-height:1.45; color:var(--bl-grey); text-wrap:pretty; }
.bl-share .tr {
  width:34px; height:20px; flex:none; position:relative; border-radius:999px;
  background:rgba(34,34,31,.16); transition:background 200ms cubic-bezier(.2,.7,.2,1);
}
.bl-share .tr b {
  position:absolute; top:2px; left:2px; width:16px; height:16px; border-radius:999px;
  background:#fff; transition:left 200ms cubic-bezier(.2,.7,.2,1);
}
.bl-share .tog[aria-pressed="true"] .tr { background:#111; }
.bl-share .tog[aria-pressed="true"] .tr b { left:16px; }

.bl-share .term { display:flex; flex-direction:column; gap:10px; }
.bl-share .term .opts { display:flex; gap:6px; }
.bl-share .term .opt {
  flex:1; text-align:center; padding:11px 0; border:0; border-radius:999px;
  font:inherit; font-size:15px; cursor:pointer;
  background:rgba(255,255,255,.7); color:#3A3A3A;
  transition:background 180ms cubic-bezier(.2,.7,.2,1), color 180ms cubic-bezier(.2,.7,.2,1);
}
.bl-share .term .opt.on { background:#111; color:#fff; }
.bl-share .term .hint { font-size:13px; color:var(--bl-grey); }

.bl-share .go {
  background:#111; color:#fff; border:0; border-radius:999px; font:inherit; font-size:16px;
  padding:17px 0; text-align:center; cursor:pointer;
}
.bl-share .go:hover { background:#2A2A2A; }
.bl-share .go[disabled] { opacity:.5; cursor:default; }

.bl-share .addr { display:flex; flex-direction:column; gap:12px; }
.bl-share .addr .fld {
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  background:#fff; border-radius:16px; padding:8px 8px 8px 18px;
}
.bl-share .addr .fld .a {
  font-size:15px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.bl-share .addr .fld button {
  flex:none; border:0; border-radius:999px; background:#111; color:#fff;
  font:inherit; font-size:14px; padding:11px 20px; cursor:pointer;
}
.bl-share .addr .fld button:hover { background:#2A2A2A; }
.bl-share .addr .warn { font-size:13px; line-height:1.5; color:#C06A83; text-wrap:pretty; }
.bl-share .addr .acts { display:flex; align-items:center; gap:20px; }

.bl-share .lnk {
  border:0; background:none; padding:0; font:inherit; font-size:14px; cursor:pointer;
  color:var(--bl-ink); text-decoration:underline; text-underline-offset:3px;
}
.bl-share .lnk.mut { color:var(--bl-grey); }
.bl-share .lnk.mut:hover { color:var(--bl-ink); }

.bl-share .list { display:flex; flex-direction:column; gap:10px; padding-top:2px; }
.bl-share .one {
  background:rgba(255,255,255,.7); border-radius:20px; padding:16px 18px;
  display:flex; flex-direction:column; gap:9px; box-shadow:0 1px 2px rgba(0,0,0,.03);
}
.bl-share .one .top { display:flex; align-items:baseline; justify-content:space-between; gap:14px; }
.bl-share .one .from { font-size:16px; }
.bl-share .one .exp { font-size:13px; color:var(--bl-grey); }
.bl-share .one .seen { display:flex; align-items:center; gap:9px; }
.bl-share .one .seen i { width:6px; height:6px; flex:none; border-radius:999px; background:rgba(34,34,31,.22); }
.bl-share .one.hot .seen i { background:#8FD3A5; }
.bl-share .one .seen span { font-size:13px; color:#9A9A9A; text-wrap:pretty; }
.bl-share .one.hot .seen span { color:#4A4A4A; }
.bl-share .one .lnk { font-size:13px; }

.bl-share .bl-err {
  border-radius:16px; background:rgba(242,163,181,.2); color:#8E3C49;
  padding:14px 18px; font-size:13px; line-height:1.5;
}

/* На узком экране панель — нижняя шторка: справа ей просто некуда встать. */
@media (max-width:760px) {
  .bl-share {
    left:0; right:0; top:52px; bottom:0; width:auto;
    border-radius:24px 24px 0 0; box-shadow:0 -18px 50px rgba(0,0,0,.2);
    padding:20px 16px; gap:16px;
  }
}

/* ---- узко ----------------------------------------------------------------- */

@media (max-width:760px) {
  .bl-page .bl-hero { height:250px; }
  .bl-page .bl-hero.short { height:230px; }
  .bl-page .bl-hero .foot { left:20px; right:20px; bottom:18px; }
  .bl-page .bl-hero h1 { font-size:40px; }
  .bl-page .bl-hero .top { right:16px; top:18px; }
  .bl-page .bl-body { padding:20px 16px 28px; gap:18px; }
  .bl-page .bl-empty .cell { width:240px; height:240px; }
  .bl-page .bl-empty .t { font-size:40px; }
}

/* ---- AI интерпретация: строка-вход и панель ------------------------------ */
/*
 * Макет «Кровь · стиль приложения», раздел 11. На странице от интерпретации
 * остаётся строка в 96 px — заголовок, дата сборки, счёт и пилюля. Всё
 * остальное живёт в панели справа, той же, что «Отчёт для врача».
 *
 * Так потому, что интерпретация — чтение, а не часть списка: развёрнутая на
 * странице, она отодвигала список маркеров на экран вниз, и человек проходил
 * мимо того, ради чего открыл сдачу. Строка же не отодвигает ничего и цветом
 * говорит, что под ней что-то есть.
 *
 * Имена с приставкой `bl-` и всё вложенное: в кабинете `.top`, `.mk`, `.grp` у
 * каждой страницы значат своё, и общий файл накрыл бы чужую разметку.
 */

/* ---- строка-вход ---- */
.bl-page .bl-rz {
  width:100%; height:96px; display:flex; align-items:center; gap:24px;
  padding:0 26px; border:0; border-radius:20px; font:inherit; text-align:left;
  color:var(--bl-ink); cursor:pointer;
  background:linear-gradient(104deg,#E6F1FB 0%,#DCEBFA 46%,#EFF6FF 100%);
  box-shadow:0 2px 16px rgba(120,160,205,.16);
  transition:box-shadow 160ms linear;
}
.bl-page .bl-rz:hover { box-shadow:0 4px 22px rgba(120,160,205,.26); }
/* Пока интерпретации нет, строка не кликается целиком: нажимать надо кнопку,
   и она об этом говорит цветом. */
.bl-page .bl-rz.bare { cursor:default; }
.bl-page .bl-rz.bare:hover { box-shadow:0 2px 16px rgba(120,160,205,.16); }
.bl-page .bl-rz .t { display:flex; flex-direction:column; gap:3px; min-width:0; flex:1 1 auto; }
.bl-page .bl-rz .t b { font-weight:400; font-size:24px; color:var(--bl-ink); }
.bl-page .bl-rz .t .d { font-size:13px; color:#5A7794; }
.bl-page .bl-rz .t .n { font-size:14px; color:#3E5A75; font-variant-numeric:tabular-nums; }
.bl-page .bl-rz .go {
  flex:none; font:inherit; font-size:14px; padding:11px 22px; border:0; border-radius:999px;
  background:#fff; color:var(--bl-ink); cursor:pointer; white-space:nowrap;
  box-shadow:0 1px 3px rgba(60,100,150,.14);
}
/* Собрать — главное действие, и пилюля у него плотная. */
.bl-page .bl-rz .go.hot { background:#111; color:#fff; padding:12px 26px; box-shadow:none; }

/* ---- панель ---- */
.bl-rzp, .bl-rzp-veil {
  --bl-ink:#1A1A1A; --bl-grey:#8A8A8A;
  font-variant-numeric:tabular-nums;
}
.bl-rzp[hidden], .bl-rzp [hidden], .bl-rzp-veil[hidden] { display:none !important; }

.bl-rzp-veil { position:fixed; inset:0; z-index:60; background:rgba(24,24,24,.3); }
body.bl-rzp-open .colFull { filter:blur(7px); }

.bl-rzp {
  position:fixed; right:0; top:0; bottom:0; width:520px; max-width:100%; z-index:61;
  background:#F6F5F4; box-shadow:-24px 0 60px rgba(0,0,0,.18);
  display:flex; flex-direction:column; gap:18px; padding:26px 28px 24px;
  color:var(--bl-ink); overflow:hidden;
}
.bl-rzp .x {
  position:absolute; right:24px; top:26px; width:34px; height:34px; flex:none;
  border:0; border-radius:999px; background:#fff; font:inherit; font-size:15px;
  color:var(--bl-ink); cursor:pointer; box-shadow:0 1px 2px rgba(0,0,0,.06);
  display:flex; align-items:center; justify-content:center;
}
.bl-rzp .x:hover { background:#111; color:#fff; }
.bl-rzp .hd { flex:none; display:flex; flex-direction:column; gap:5px; padding-right:44px; }
.bl-rzp .hd h2 { margin:0; font-size:28px; font-weight:300; line-height:1.1; }
.bl-rzp .hd .d { font-size:13px; color:var(--bl-grey); }
/* Прокручивается только середина: шапка и подвал держат края панели. */
.bl-rzp .scroll {
  flex:1; min-height:0; overflow-y:auto; display:flex; flex-direction:column; gap:18px;
  scrollbar-width:none; -ms-overflow-style:none;
}
.bl-rzp .scroll::-webkit-scrollbar { display:none; }

/* ---- наблюдение ---- */
.bl-rzp .obs { display:flex; flex-direction:column; flex:none; }
.bl-rzp .ob {
  display:flex; flex-direction:column; gap:9px;
  padding:14px 0; border-top:1px solid rgba(34,34,31,.08);
}
.bl-rzp .ob:first-child { padding:0 0 14px; border-top:0; }
.bl-rzp .ob .top { display:flex; align-items:flex-start; gap:16px; }
.bl-rzp .ob .p { font-size:16px; line-height:1.45; text-wrap:pretty; flex:1 1 auto; min-width:0; }
.bl-rzp .ob svg { flex:none; margin-top:2px; overflow:visible; }
.bl-rzp .ob svg .band { fill:rgba(143,211,165,.42); }
/* В покое от оснований видна одна строка: сколько их и откуда. Простыня под
   каждой фразой превращала панель в свиток, который не читают. */
.bl-rzp .ob .src {
  display:flex; align-items:center; gap:8px; padding:0; border:0; background:none;
  font:inherit; font-size:13px; color:var(--bl-grey); cursor:pointer; text-align:left;
}
.bl-rzp .ob .src .cv { font-size:11px; transition:transform .2s cubic-bezier(.22,.8,.2,1); }
.bl-rzp .ob .src[aria-expanded="false"] .cv { transform:rotate(-90deg); }
.bl-rzp .ob .bases { display:flex; flex-direction:column; gap:6px; padding:2px 0 0; }
.bl-rzp .ob .bases span {
  font-size:13px; line-height:1.45; color:var(--bl-grey); text-wrap:pretty;
}

/* ---- шаги ---- */
.bl-rzp .steps { display:flex; flex-direction:column; gap:10px; flex:none; }
.bl-rzp .steps .h { font-size:15px; color:var(--bl-grey); }
.bl-rzp .st {
  display:flex; align-items:center; gap:18px; width:100%;
  padding:12px 0; border:0; border-top:1px solid rgba(34,34,31,.08);
  background:none; font:inherit; color:inherit; text-align:left; cursor:pointer;
}
.bl-rzp .steps .h + .st { padding:0 0 12px; border-top:0; }
.bl-rzp .st .t { display:flex; flex-direction:column; gap:4px; min-width:0; flex:1 1 auto; }
.bl-rzp .st .k { font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--bl-grey); }
.bl-rzp .st .n { font-size:16px; line-height:1.35; text-wrap:pretty; }
.bl-rzp .st .g { font-size:13px; line-height:1.45; color:var(--bl-grey); text-wrap:pretty; }
.bl-rzp .tog { display:flex; align-items:center; gap:10px; flex:none; }
.bl-rzp .tog .lab { font-size:14px; color:var(--bl-grey); transition:color 160ms linear; }
.bl-rzp .st[aria-pressed="true"] .tog .lab { color:var(--bl-ink); }
.bl-rzp .tog i {
  position:relative; display:block; width:40px; height:23px; border-radius:999px; flex:none;
  background:rgba(34,34,31,.16); transition:background 160ms linear;
}
.bl-rzp .st[aria-pressed="true"] .tog i { background:#8FD3A5; }
.bl-rzp .tog i::after {
  content:''; position:absolute; top:2.5px; left:2.5px; width:18px; height:18px; border-radius:999px;
  background:#fff; box-shadow:0 1px 2px rgba(0,0,0,.12);
  transition:left 160ms cubic-bezier(.22,.8,.2,1);
}
.bl-rzp .st[aria-pressed="true"] .tog i::after { left:19.5px; }

/* ---- подвал панели ---- */
.bl-rzp .rzfoot {
  flex:none; display:flex; flex-direction:column; gap:5px;
  padding-top:14px; border-top:1px solid rgba(34,34,31,.08);
  font-size:13px; line-height:1.45; color:var(--bl-grey);
}
.bl-rzp .rzfoot .redo {
  margin-top:3px; align-self:flex-start; font:inherit; font-size:13px; color:var(--bl-grey);
  background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline; text-underline-offset:3px;
}
.bl-rzp .rzfoot .redo:hover { color:var(--bl-ink); }
.bl-rzp .bl-err { margin-bottom:2px; }

@media screen and (max-width:760px) {
  .bl-page .bl-rz {
    height:auto; flex-direction:column; align-items:flex-start; gap:14px; padding:18px;
  }
  .bl-page .bl-rz .t b { font-size:20px; }
  /* На 390 панель — нижняя шторка на всю высоту. */
  .bl-rzp { left:0; width:auto; padding:20px 16px 22px; box-shadow:0 -18px 50px rgba(0,0,0,.2); }
  .bl-rzp .x { right:16px; top:18px; }
  .bl-rzp .hd h2 { font-size:24px; }
  /* График уходит под фразу, тумблер — под пояснение шага. */
  .bl-rzp .ob .top { flex-direction:column; gap:12px; }
  .bl-rzp .st { flex-direction:column; align-items:flex-start; gap:10px; }
}