/* Актив-Мото: блок «Что делает мастер на каждом ТО» (отчёт мастера). Подключается на странице сервиса внутри <div class="mrb">.
   Источник подачи — Актив-Мото-ТО-блок-варианты.html (вариант 1, текст ТО-0 «Г», шкала «Фильтр»). 19.10.2026 */
  .mrb .mono { font:500 12px/1.45 'JetBrains Mono', monospace; }
  .mrb svg.i { width:16px; height:16px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round; flex:none; }
  /* ---- общее: ТО-0 (почему + до/после) ---- */ .mrb .z0 { display:grid; gap:22px; }
  .mrb .badge { display:inline-flex; align-items:center; gap:8px; font:500 12px 'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--ink2); }
  .mrb .badge::before { content:''; width:7px; height:7px; border-radius:50%; background:var(--ok); flex:none; }
  .mrb .zt h3 { font-size:28px; font-weight:800; letter-spacing:-.025em; line-height:1.08; margin-top:10px; } .mrb .zt p { font-size:15.5px; color:var(--ink2); margin-top:10px; max-width:440px; }
  @media (min-width:960px) { .mrb .zt .mb { display:none; } .mrb .zt h3 { font-size:38px; } .mrb .zt p { margin:0; font-size:16.5px; } }
  .mrb .z0n { display:flex; align-items:center; gap:10px; font-size:14.5px; font-weight:600; } .mrb .z0n svg { width:18px; height:18px; padding:3px; border-radius:50%; border:1.5px solid var(--red); color:var(--red); stroke-width:2.4; box-sizing:content-box; }
  .mrb .u { display:inline-flex; align-items:center; gap:8px; font:500 12px 'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--mute); } .mrb .u svg { width:18px; height:18px; }
  /* цвет узла: масло — янтарный, подшипники — синий, редуктор — фиолетовый, охлаждение — голубой */ .mrb .ub { --c:#E8890C; width:34px; height:34px; border-radius:10px; display:grid; place-items:center; flex:none; color:#fff;
    background:linear-gradient(160deg, color-mix(in srgb, var(--c) 78%, #fff), var(--c)); box-shadow:inset 0 1px 0 rgba(255,255,255,.3), 0 4px 12px -4px color-mix(in srgb, var(--c) 60%, transparent); }
  .mrb .ub.brg { --c:#2563EB; } .mrb .ub.gear { --c:#7C3AED; } .mrb .ub.cool { --c:#0EA5E9; } .mrb .ub svg { stroke-width:2; }
  .mrb .u:has(.ub) { gap:10px; color:var(--ink2); }
  /* б: четыре находки */ .mrb .zb { display:grid; grid-template-columns:repeat(2, minmax(0, 1fr)); gap:10px; } .mrb .zb b { hyphens:manual; -webkit-hyphens:manual; overflow-wrap:anywhere; min-width:0; }   /* anywhere, не break-word: в сетке break-word не сужал строку — «Транспортировочное» залезало на соседнюю карточку (23.10). Переносы только свои (&shy;): авто давало «мас-ло» в Zen */ .mrb .zb > div { border:1px solid var(--line); border-radius:18px; padding:16px; display:grid; align-content:start; gap:6px; }
  .mrb .zb b { font-size:18px; font-weight:800; letter-spacing:-.01em; line-height:1.15; margin-top:10px; }
  @media (max-width:479px) { .mrb .zb { grid-template-columns:minmax(0, 1fr); } } .mrb .zb small { font-size:13.5px; color:var(--ink2); line-height:1.35; }
  .mrb .zb em { margin-top:auto; padding-top:12px; display:flex; align-items:center; gap:6px; font-style:normal; font-size:14px; font-weight:700; } .mrb .zb em svg { width:14px; height:14px; }
  @media (min-width:960px) { .mrb .zb { grid-template-columns:repeat(4, minmax(0, 1fr)); gap:14px; } .mrb .zb > div { padding:20px; min-height:200px; } .mrb .zb b { font-size:clamp(16px, 1.5vw, 20px); } }   /* 20, а на узких — меньше: «Транспорти- / ровочное масло» ровно в 2 строки (владелец 24.10). От ширины окна, не карточки: размер «по карточке» (container) сбивал строки соседних карточек */
  .mrb .zd .k { font:500 12px 'JetBrains Mono', monospace; letter-spacing:.08em; text-transform:uppercase; color:var(--mute); margin-top:12px; } .mrb .zd .k + b { margin-top:2px; }
  .mrb .zd .k.ok { margin-top:auto; padding-top:12px; border-top:1px solid var(--line); } .mrb .zd em { margin-top:2px; padding-top:0; } .mrb .zd em { align-items:flex-start; } .mrb .zd em svg { color:var(--ok); width:16px; height:16px; margin-top:2px; }
  .mrb .zd { row-gap:0; } .mrb .zd > div { padding-bottom:16px; margin-bottom:10px; grid-row:span 6; grid-template-rows:subgrid; row-gap:0; align-content:stretch; }
  .mrb .zd .k.ok { margin-top:14px; align-self:end; } .mrb .zd small { align-self:start; margin-top:6px; }
  @media (min-width:960px) { .mrb .zd > div { margin-bottom:0; } }
  .mrb .bas { display:grid; gap:14px; } .mrb .ba { margin:0; }
  .mrb .baw { position:relative; aspect-ratio:4/5; border-radius:16px; overflow:hidden; background:var(--panel); user-select:none; }
  .mrb .baw img { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; } .mrb .baw img.bef { clip-path:inset(0 calc(100% - var(--p)) 0 0); }
  .mrb .baw .bar { position:absolute; top:0; bottom:0; left:var(--p); width:2px; background:#fff; translate:-1px 0; box-shadow:0 0 8px rgba(0,0,0,.4); pointer-events:none; }
  .mrb .baw .bar::after { content:'‹ ›'; position:absolute; top:50%; left:50%; translate:-50% -50%; width:38px; height:38px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font:700 15px 'Golos Text'; box-shadow:0 4px 14px rgba(0,0,0,.25); }
  .mrb .baw input { position:absolute; inset:0; width:100%; height:100%; opacity:0; cursor:ew-resize; margin:0; }
  /* ярлыки «До / После»: матовое стекло внизу кадра, точка — светофор (сухо → смазано) */ .mrb .baw .tg { position:absolute; bottom:12px; display:inline-flex; align-items:center; gap:8px; padding:8px 13px 8px 11px; border-radius:12px; pointer-events:none;
    background:rgba(17,18,20,.5); -webkit-backdrop-filter:blur(12px) saturate(1.4); backdrop-filter:blur(12px) saturate(1.4); box-shadow:inset 0 0 0 1px rgba(255,255,255,.14);
    color:#fff; font:700 14px/1 'Golos Text', sans-serif; } .mrb .baw .tg.l { left:12px; } .mrb .baw .tg.r { right:12px; }
  .mrb .baw .tg::before { content:''; width:8px; height:8px; border-radius:50%; background:#E5322B; box-shadow:0 0 0 3px rgba(229,50,43,.25); } .mrb .baw .tg.r::before { background:#16A34A; box-shadow:0 0 0 3px rgba(22,163,74,.28); }
  .mrb .baw .tg small { font:500 12px 'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase; opacity:.7; }
  @media (max-width:559px) { .mrb .baw .tg { padding:7px 10px 7px 9px; font-size:13px; bottom:10px; } .mrb .baw .tg small { display:none; } .mrb .baw .tg.l { left:10px; } .mrb .baw .tg.r { right:10px; } }
  .mrb .ba figcaption { font-size:14px; color:var(--ink2); margin-top:8px; }
  @media (min-width:700px) { .mrb .bas { grid-template-columns:1fr 1fr; } .mrb .baw { aspect-ratio:auto; height:480px; } }
  @media (min-width:960px) { .mrb .z0 { gap:28px; } .mrb .z0t { grid-template-columns:1fr 1fr; gap:40px; align-items:start; } .mrb .z0f { margin-top:0; } .mrb .bas { gap:16px; } .mrb .baw { height:600px; border-radius:20px; } }

  /* ---- общее: группы работ ---- */ .mrb .works { display:grid; gap:20px; }
  .mrb .wk h4 { display:flex; align-items:center; gap:8px; font-size:12.5px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; padding-bottom:8px; border-bottom:1.5px solid var(--ink); }
  .mrb .wk h4 em { margin-left:auto; font:500 12px 'JetBrains Mono', monospace; font-style:normal; color:var(--mute); }
  .mrb .wk ul { list-style:none; } .mrb .wk li { padding:9px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.4; }
  .mrb .wk li.new span::after { content:'новое'; margin-left:8px; font:500 12px 'JetBrains Mono', monospace; letter-spacing:.04em; text-transform:uppercase; color:var(--ok); }
  @media (min-width:960px) { .mrb .works { grid-template-columns:repeat(3,1fr); gap:28px; } }

  .mrb .bk { margin-top:20px; display:flex; flex-wrap:wrap; align-items:center; gap:12px 24px; border-top:1px solid var(--line); padding-top:20px; }
  .mrb .bk p { display:grid; margin-right:auto; } .mrb .bk b { font-size:18px; font-weight:800; } .mrb .bk span { font-size:14.5px; color:var(--ink2); }
  .mrb .btn { height:50px; border-radius:12px; display:inline-flex; align-items:center; justify-content:center; padding:0 22px; font-weight:600; font-size:15.5px; background:var(--ink); color:#fff; text-decoration:none; white-space:nowrap; } @media (max-width:559px) { .mrb .bk .btn { width:100%; } }
  .mrb .R .box { display:grid; gap:12px; margin-top:24px; }
  .mrb .R .steps { display:grid; grid-template-columns:repeat(3,1fr); gap:6px; }
  .mrb .R .steps button { text-align:left; border:1px solid var(--line); background:#fff; border-radius:14px; padding:10px 12px; cursor:pointer; display:grid; gap:2px; transition:border-color .2s, background .2s; }
  .mrb .R .steps button b { font-size:17px; font-weight:800; } .mrb .R .steps button span { font:500 12px/1.35 'JetBrains Mono', monospace; color:var(--mute); }
  .mrb .R .steps .sm { display:none; } @media (max-width:559px) { .mrb .R .steps .lg { display:none; } .mrb .R .steps .sm { display:block; } }
  .mrb .R .steps button:hover { border-color:#C9CCD2; } .mrb .R .steps button.on { background:var(--ink); border-color:var(--ink); color:#fff; } .mrb .R .steps button.on span { color:rgba(255,255,255,.65); }
  .mrb .R .rep { border:1px solid var(--line); border-radius:22px; } .mrb .R .rh { border-radius:21px 21px 0 0; }
  .mrb .R .rh { display:flex; flex-wrap:wrap; align-items:center; gap:6px 16px; padding:16px 18px; background:var(--panel); border-bottom:1px solid var(--line); }
  .mrb .R .rh .rhp { flex-basis:100%; font-size:15px; color:var(--ink2); line-height:1.4; } .mrb .R .rh b { font-size:22px; font-weight:800; } .mrb .R .rh .mono { color:var(--ink2); } .mrb .R .rh .cnt { margin-left:auto; display:flex; flex-wrap:wrap; gap:4px 14px; color:var(--ink2); font-size:13px; }
  .mrb .R .rb { padding:18px; transition:opacity .18s; } .mrb .R .rb.swap { opacity:0; }
  .mrb .R .z0 { padding-bottom:22px; margin-bottom:6px; border-bottom:1px solid var(--line); }
  .mrb .R .rows { list-style:none; } .mrb .R .rows li { display:grid; grid-template-columns:1fr auto; gap:10px; align-items:center; padding:11px 0; border-bottom:1px solid var(--line); font-size:15px; line-height:1.35; }
  .mrb .R .rows li:last-child { border-bottom:0; }
  /* подсказка при наведении (на телефоне — по нажатию) */ .mrb .R .rows li { position:relative; cursor:help; outline:none; } .mrb .R .rows .nm { display:inline; }
  .mrb .R .rows .q { display:inline-grid; place-items:center; width:16px; height:16px; margin-left:7px; border-radius:50%; border:1.3px solid #C9CCD2; color:var(--mute); font:700 12px/1 'Golos Text'; font-style:normal; vertical-align:2px; transition:all .2s; }
  .mrb .R .rows li:hover .q, .mrb .R .rows li:focus .q { background:var(--ink); border-color:var(--ink); color:#fff; }
  .mrb .R .tp { position:absolute; left:0; top:calc(100% - 4px); z-index:6; width:min(360px, 100%); padding:12px 14px; border-radius:14px; background:#fff; border:1px solid var(--line);
    box-shadow:0 14px 34px -10px rgba(17,18,20,.28); font-size:14px; line-height:1.45; color:var(--ink2); opacity:0; visibility:hidden; transform:translateY(-4px); transition:opacity .18s, transform .18s, visibility .18s; pointer-events:none; }
  .mrb .R .tpm { display:flex; align-items:center; gap:6px; font:500 12px 'JetBrains Mono', monospace; letter-spacing:.06em; text-transform:uppercase; color:var(--ok); margin-bottom:6px; }
  .mrb .R .tpm::before { content:''; width:6px; height:6px; border-radius:50%; background:var(--ok); }
  .mrb .R .rows li:hover .tp, .mrb .R .rows li:focus .tp { opacity:1; visibility:visible; transform:none; }
  /* светофор по важности: осмотр — зелёный, настройка — жёлтый, замена — красный; столбики как уровень сигнала */ .mrb .R .pill { --b:#16A34A; --s:rgba(22,163,74,.28); display:inline-flex; align-items:center; gap:7px; height:28px; padding:0 12px 0 10px; border-radius:999px; color:#fff; font-size:12.5px; font-weight:700; letter-spacing:.01em; white-space:nowrap;
    background:linear-gradient(180deg, color-mix(in srgb, var(--b) 82%, #fff), var(--b)); box-shadow:inset 0 1px 0 rgba(255,255,255,.28), 0 3px 10px -3px var(--s); }
  .mrb .R .pill.reg { --b:#E8890C; --s:rgba(232,137,12,.32); } .mrb .R .pill.zam { --b:#E5322B; --s:rgba(229,50,43,.32); }
  .mrb .R .pill .lv i { opacity:.4; } .mrb .R .pill .lv i.on { opacity:1; }
  .mrb .lv { display:inline-flex; align-items:flex-end; gap:2px; height:12px; } .mrb .lv i { width:3px; border-radius:1px; background:currentColor; opacity:.25; }
  .mrb .lv i:nth-child(1) { height:5px; } .mrb .lv i:nth-child(2) { height:8px; } .mrb .lv i:nth-child(3) { height:12px; } .mrb .lv i.on { opacity:1; }
  /* шкала 2: фильтр */ .mrb .mf { display:grid; grid-template-columns:repeat(4,auto); gap:6px; margin:12px 0 8px; justify-content:start; }
  .mrb .mf button { height:40px; padding:0 14px; border-radius:999px; border:1px solid var(--line); background:#fff; display:inline-flex; align-items:center; gap:8px; font-size:14.5px; font-weight:600; cursor:pointer; transition:background .2s, border-color .2s; }
  .mrb .mf button i { width:8px; height:8px; border-radius:50%; background:var(--c); } .mrb .mf button em { font:500 12px 'JetBrains Mono', monospace; font-style:normal; color:var(--mute); }
  .mrb .mf button:hover { border-color:#C9CCD2; } .mrb .mf button.on { background:var(--ink); border-color:var(--ink); color:#fff; } .mrb .mf button.on em { color:rgba(255,255,255,.6); }
  .mrb .mfh { font-size:13px; color:var(--mute); margin-bottom:6px; }
  @media (max-width:559px) { .mrb .mf { grid-template-columns:repeat(2,1fr); } .mrb .mf button { justify-content:flex-start; } .mrb .mf button em { margin-left:auto; } }
  .mrb .R .rh2 { font:500 12px 'JetBrains Mono', monospace; letter-spacing:.1em; text-transform:uppercase; color:var(--mute); margin:18px 0 2px; }
  @media (max-width:559px) { .mrb .R .rh .cnt { margin-left:0; width:100%; } .mrb .R .rows li { font-size:14.5px; } .mrb .R .pill { padding:0 9px 0 8px; } }
  .mrb .R .cnt > span { display:inline-flex; align-items:center; gap:6px; } .mrb .R .cnt .lv { height:10px; } .mrb .R .cnt .lv i:nth-child(3) { height:10px; } .mrb .R .cnt .lv i:nth-child(2) { height:7px; } .mrb .R .cnt .lv i:nth-child(1) { height:4px; }
  @media (min-width:960px) { .mrb .R .box { grid-template-columns:240px 1fr; gap:20px; margin-top:32px; align-items:start; }
    .mrb .R .steps { grid-template-columns:1fr; gap:8px; position:sticky; top:60px; } .mrb .R .steps button { padding:14px 16px; } .mrb .R .steps button b { font-size:20px; }
    .mrb .R .rh { padding:20px 28px; } .mrb .R .rh b { font-size:26px; } .mrb .R .rb { padding:24px 28px; } .mrb .R .rows { columns:2; column-gap:40px; } .mrb .R .rows li { break-inside:avoid; } .mrb .R .rows li:last-child { border-bottom:1px solid var(--line); } }
  /* ---- появление блоков: подъём с затуханием, слова из-под маски, фото шторкой, строки лесенкой ---- */ html.rv-on .mrb .rv { opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.2,.7,.2,1) var(--d, 0s), transform .9s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
  html.rv-on .mrb .rv.rv-up { transform:translateY(40px) scale(.98); } html.rv-on .mrb .rv.rv-row { transform:translateX(-14px); }
  html.rv-on .mrb .rv.in { opacity:1; transform:none; }
  .mrb .rvw .w { display:inline-block; overflow:hidden; vertical-align:top; padding-bottom:.06em; margin-bottom:-.06em; }
  .mrb .rvw .w i { display:inline-block; font-style:normal; }
  html.rv-on .mrb .rvw .w i { transform:translateY(105%); transition:transform 1s cubic-bezier(.16,1,.3,1) var(--d); } html.rv-on .mrb .rvw.in .w i { transform:none; }
  html.rv-on .mrb .rv-ph .baw { clip-path:inset(100% 0 0 0 round 20px); transition:clip-path 1.2s cubic-bezier(.77,0,.18,1) var(--d, 0s); }
  html.rv-on .mrb .rv-ph .baw img { transform:scale(1.14); transition:transform 1.8s cubic-bezier(.16,1,.3,1) var(--d, 0s); }
  html.rv-on .mrb .rv-ph figcaption { opacity:0; transition:opacity .6s ease calc(var(--d, 0s) + .7s); }
  html.rv-on .mrb .rv-ph.in .baw { clip-path:inset(0 round 20px); } html.rv-on .mrb .rv-ph.in .baw img { transform:none; } html.rv-on .mrb .rv-ph.in figcaption { opacity:1; }
  .mrb .rv-img .ba:nth-child(2) { --d:.15s; }
  @media (prefers-reduced-motion:reduce) { html.rv-on .mrb .rv, html.rv-on .mrb .rvw .w i, html.rv-on .mrb .rv-ph .baw, html.rv-on .mrb .rv-ph .baw img, html.rv-on .mrb .rv-ph figcaption { opacity:1; transform:none; clip-path:none; transition:none; } }