/* Карта маршрута (Л5, docs/LOGISTICS.md §6): токены обеих тем и стили SVG из logistics/route_map.py.
   Приём hero Carsakh — инлайновый SVG, бегущий штрих, маркер по пути, пульс назначения; геометрия из данных.
   Тёмная тема — те же токены в обоих тёмных блоках (конвенция каркасов: системная схема без штампа + явный выбор). */
:root{
  --rm-sea:#e0ebf7; --rm-lake:#e0ebf7; --rm-land:#fbfdff; --rm-coast:rgba(18,58,107,.55); --rm-border:rgba(18,58,107,.3);
  --rm-grat:rgba(18,58,107,.1); --rm-tsea:rgba(18,58,107,.5); --rm-tland:rgba(7,26,51,.58); --rm-tgrat:rgba(18,58,107,.5);
  --rm-leg-sea:#15589f; --rm-leg-land:#8f5b00; --rm-node:#fff; --rm-node-stroke:#071a33; --rm-text:#071a33; --rm-text-soft:#2e4b73;
  --rm-halo:rgba(21,88,159,.22); --rm-core:#071a33; --rm-badge:#fff; --rm-pill:rgba(255,255,255,.92); --rm-pill-text:#071a33;
  --rm-done:rgba(7,104,63,.75); --rm-gps:#c2410c;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]):not([data-theme="warm-glass"]){
    --rm-sea:#0b1a30; --rm-lake:#0b1a30; --rm-land:#172b4c; --rm-coast:rgba(172,206,246,.55); --rm-border:rgba(172,206,246,.22);
    --rm-grat:rgba(255,255,255,.07); --rm-tsea:rgba(255,255,255,.36); --rm-tland:rgba(255,255,255,.6); --rm-tgrat:rgba(255,255,255,.32);
    --rm-leg-sea:#7fc0ff; --rm-leg-land:#f0b35c; --rm-node:#fff; --rm-node-stroke:#0b1a30; --rm-text:#fff; --rm-text-soft:rgba(255,255,255,.72);
    --rm-halo:rgba(127,192,255,.28); --rm-core:#fff; --rm-badge:#f8fbff; --rm-pill:rgba(11,26,48,.82); --rm-pill-text:#fff;
    --rm-done:rgba(79,208,149,.8); --rm-gps:#fb923c;
  }
}
:root[data-theme="dark"]{
  --rm-sea:#0b1a30; --rm-lake:#0b1a30; --rm-land:#172b4c; --rm-coast:rgba(172,206,246,.55); --rm-border:rgba(172,206,246,.22);
  --rm-grat:rgba(255,255,255,.07); --rm-tsea:rgba(255,255,255,.36); --rm-tland:rgba(255,255,255,.6); --rm-tgrat:rgba(255,255,255,.32);
  --rm-leg-sea:#7fc0ff; --rm-leg-land:#f0b35c; --rm-node:#fff; --rm-node-stroke:#0b1a30; --rm-text:#fff; --rm-text-soft:rgba(255,255,255,.72);
  --rm-halo:rgba(127,192,255,.28); --rm-core:#fff; --rm-badge:#f8fbff; --rm-pill:rgba(11,26,48,.82); --rm-pill-text:#fff;
  --rm-done:rgba(79,208,149,.8); --rm-gps:#fb923c;
}

/* Третья тема «матовое стекло»: суша — белая бумага, море — тон фона, морское плечо — чернила, по России — бронза. */
:root[data-theme="warm-glass"]{
  --rm-sea:#ebeae4; --rm-lake:#ebeae4; --rm-land:#ffffff; --rm-coast:rgba(25,47,64,.4); --rm-border:rgba(25,47,64,.22);
  --rm-grat:rgba(25,47,64,.07); --rm-tsea:rgba(25,47,64,.42); --rm-tland:rgba(25,47,64,.62); --rm-tgrat:rgba(25,47,64,.38);
  --rm-leg-sea:#192f40; --rm-leg-land:#846645; --rm-node:#fff; --rm-node-stroke:#192f40; --rm-text:#192f40; --rm-text-soft:#2f4355;
  --rm-halo:rgba(132,102,69,.26); --rm-core:#192f40; --rm-badge:#fff; --rm-pill:rgba(255,255,255,.94); --rm-pill-text:#192f40;
  --rm-done:rgba(43,96,86,.8); --rm-gps:#b45309;
}

/* карточка карты */
.rm-card{position:relative; margin:0; border-radius:var(--r-lg); overflow:hidden; background:var(--rm-sea);
  border:1px solid var(--glass-line-outer); box-shadow:var(--lift-1)}
.rm-card.rm-inline{margin:12px 0 4px; border-radius:var(--r-md); box-shadow:none}
.rm-card svg.route-map{display:block; width:100%; height:auto}
.rm-cap{position:absolute; left:14px; bottom:12px; padding:6px 10px; border-radius:8px; background:var(--rm-pill); color:var(--rm-pill-text);
  font:700 11px/1.3 var(--font); letter-spacing:.08em; text-transform:uppercase; max-width:calc(100% - 28px)}
.rm-legend{position:absolute; right:14px; top:12px; display:flex; gap:10px; padding:6px 10px; border-radius:8px; background:var(--rm-pill);
  color:var(--rm-pill-text); font:600 11px/1.3 var(--font)}
.rm-legend i{display:inline-block; width:14px; height:0; border-top:2px dashed var(--rm-leg-sea); vertical-align:middle; margin-right:5px}
.rm-legend i.land{border-top-color:var(--rm-leg-land)}

/* подложка (классы задаёт build_basemap) */
.rm-sea{fill:var(--rm-sea)}
.rm-land{fill:var(--rm-land); stroke:var(--rm-coast); stroke-width:.8; stroke-linejoin:round}
.rm-lake{fill:var(--rm-lake); stroke:var(--rm-coast); stroke-width:.5}
.rm-border{fill:none; stroke:var(--rm-border); stroke-width:.7; stroke-dasharray:3 3}
.rm-grat{fill:none; stroke:var(--rm-grat); stroke-width:.8}
.rm-gl text{font-size:10px; fill:var(--rm-tgrat)}
.rm-geo text{text-anchor:middle; letter-spacing:3px; font-size:10px; fill:var(--rm-tsea)}
.rm-geo text.land{fill:var(--rm-tland); font-size:10.5px}
.route-map .scale path{stroke:var(--rm-tgrat); stroke-width:1; fill:none}
.route-map .scale text{font-size:9px; fill:var(--rm-tgrat)}

/* маршрут */
.rm-leg-base{fill:none; stroke-width:5; opacity:.22; stroke-linecap:round}
.rm-leg{fill:none; stroke-width:1.8; stroke-linecap:round; stroke-dasharray:5 7; animation:rm-dash 1.4s linear infinite}
.rm-leg.is-done{stroke-dasharray:none; stroke:var(--rm-done); animation:none}
.rm-leg.is-cur{stroke-width:2.6}
.tier-international{stroke:var(--rm-leg-sea)}
.tier-domestic{stroke:var(--rm-leg-land)}
.rm-via circle{fill:var(--rm-node); stroke:var(--rm-node-stroke); stroke-width:1}
.rm-via text{font-size:9.5px; fill:var(--rm-text-soft)}
.rm-node circle,.rm-node rect{fill:var(--rm-node); stroke:var(--rm-node-stroke); stroke-width:1.5}
.rm-node.role-origin circle{fill:var(--rm-leg-sea)}
.rm-node text{font-size:11.5px; font-weight:700; fill:var(--rm-text); paint-order:stroke; stroke:var(--rm-sea); stroke-width:3px; stroke-linejoin:round}
.rm-pulse{fill:none; stroke:var(--rm-leg-land); stroke-width:1.5; transform-origin:center; transform-box:fill-box; animation:rm-pulse 2.6s ease-out infinite}
.rm-leglbl rect{fill:var(--rm-pill); stroke-width:.8}
.rm-leglbl.tier-international rect{stroke:var(--rm-leg-sea)}
.rm-leglbl.tier-domestic rect{stroke:var(--rm-leg-land)}
.rm-leglbl text{font-size:10.5px; font-weight:700; fill:var(--rm-pill-text)}
.rm-marker .rm-halo{fill:var(--rm-halo)}
.rm-marker .rm-core{fill:var(--rm-core)}
.rm-badge circle{fill:var(--rm-badge); stroke:var(--rm-node-stroke); stroke-width:1}
.rm-ico{fill:none; stroke:var(--rm-node-stroke); stroke-width:1.8; stroke-linecap:round; stroke-linejoin:round}
.rm-marker[data-kind="sea"] .rm-ico-land,.rm-marker[data-kind="land"] .rm-ico-sea{display:none}
/* GPS-метка (Л7): сырая точка, линия привязки к плечу, кольцо на маршруте */
.rm-gps line{stroke:var(--rm-gps); stroke-width:1.2; stroke-dasharray:2 3}
.rm-gps circle{fill:none; stroke:var(--rm-node); stroke-width:1.6}
.rm-gps .raw{fill:var(--rm-gps); stroke:none}
.rm-gps text{font-size:9.5px; fill:var(--rm-text-soft)}

@keyframes rm-dash{to{stroke-dashoffset:-24}}
@keyframes rm-pulse{0%{transform:scale(.4); opacity:.9} 100%{transform:scale(2.4); opacity:0}}
@media (prefers-reduced-motion: reduce){.rm-leg,.rm-pulse{animation:none}}
@media (max-width:700px){
  .rm-via text,.rm-gl,.route-map .scale,.rm-geo text:not(.land),.rm-leglbl,.rm-legend{display:none}
  .rm-card{border-radius:18px}
  .rm-cap{left:10px; bottom:8px; font-size:10px}
}

/* Л7: строка состояния положения, слой GPS-метки, подсветка плеча из ленты этапов */
.rm-status{position:absolute; left:14px; top:12px; padding:6px 10px; border-radius:8px; background:var(--rm-pill); color:var(--rm-pill-text);
  font:600 11px/1.3 var(--font); max-width:calc(100% - 170px)}
.rm-card.rm-off-route .rm-status{color:var(--rm-gps)}
.rm-card.rm-stale .rm-status{color:var(--rm-text-soft)} /* К8, D24: метка старше порога свежести — «устарела» */
.rm-leg.hl{stroke-width:3.4; stroke-dasharray:none; animation:none}
.rm-gps.off circle{stroke:var(--rm-gps)}
@media (max-width:700px){.rm-status{left:10px; top:8px; font-size:10px; max-width:calc(100% - 20px)}}

/* Узкая карточка (колонка модалки сделки, боковая панель): строка состояния и подпись — под картой, а не
   поверх неё; легенда и мелкие подписи скрыты. Мерило — ширина самой карточки (@container), не окна. */
.rm-card{container-type:inline-size}
@container (max-width:560px){
  .rm-card .rm-status,.rm-card .rm-cap{position:static; display:block; max-width:none; border-radius:0; padding:8px 12px}
  .rm-card .rm-cap{border-top:1px solid var(--glass-line-outer)}
  .rm-card .rm-legend,.rm-card .rm-via text,.rm-card .rm-gl,.rm-card .route-map .scale,.rm-card .rm-geo text:not(.land),.rm-card .rm-leglbl{display:none}
}

/* ===================== Живая карта (Л9): свой город на главной, этапы, шторка ===================== */
:root{--rm-city:#1a6bc4; --rm-city-ghost:rgba(26,107,196,.18)}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]):not([data-theme="warm-glass"]){--rm-city:#7fc0ff; --rm-city-ghost:rgba(127,192,255,.2)}}
:root[data-theme="dark"]{--rm-city:#7fc0ff; --rm-city-ghost:rgba(127,192,255,.2)}
:root[data-theme="warm-glass"]{--rm-city:#846645; --rm-city-ghost:rgba(132,102,69,.18)}   /* точки городов — бронза темы (Т7) */

/* Размеры маркеров и подписей живой карты заданы в пикселях ЭКРАНА: --u — единиц карты в одном пикселе
   (ставит route-live.js по ширине карты и viewBox), --m — коэффициент на телефоне. Карта сделки и hero без
   класса rm-live рисуются прежними фиксированными размерами. */
svg.rm-live{--u:1; --m:1}
.rm-live .rm-land{stroke-width:calc(.8px*var(--u))}
.rm-live .rm-lake{stroke-width:calc(.5px*var(--u))}
.rm-live .rm-border{stroke-width:calc(.7px*var(--u)); stroke-dasharray:calc(3px*var(--u)) calc(3px*var(--u))}
.rm-live .rm-geo text.land{font-size:calc(10.5px*var(--u))}
.rm-live .rm-leg-base{stroke-width:calc(5px*var(--u))}
.rm-live .rm-leg{stroke-width:calc(1.8px*var(--u)); stroke-dasharray:calc(5px*var(--u)) calc(7px*var(--u)); animation-name:rm-dash-u}
.rm-live .rm-leg.is-cur{stroke-width:calc(2.6px*var(--u))}
.rm-live .rm-leg.hl{stroke-width:calc(3.4px*var(--u))}
.rm-live .rm-leg.is-done{stroke-dasharray:none}
@keyframes rm-dash-u{to{stroke-dashoffset:calc(-24px*var(--u))}}
.rm-inland{fill:none; stroke:var(--rm-leg-sea); stroke-width:calc(1.2px*var(--u)); stroke-dasharray:calc(1.5px*var(--u)) calc(4px*var(--u)); opacity:.7}
.rm-live .rm-node circle,.rm-live .rm-node rect{stroke-width:calc(1.5px*var(--u))}
.rm-live .rm-node text{font-size:calc(11.5px*var(--u)*var(--m)); stroke-width:calc(3px*var(--u))}
.rm-live .rm-legs *,.rm-live .rm-nodes *,.rm-live .rm-gps *{pointer-events:none}
.rm-live .rm-gps circle{stroke-width:calc(1.6px*var(--u))}
.rm-live .rm-gps text{font-size:calc(9.5px*var(--u)*var(--m)); paint-order:stroke; stroke:var(--rm-sea); stroke-width:calc(3px*var(--u))}
/* города-точки */
.rm-city{cursor:pointer}
.rm-city .hit,.rm-st .hit{fill:transparent; stroke:none; pointer-events:all}
.rm-city circle.ring{fill:var(--rm-city-ghost); stroke:none; transition:r .18s}
.rm-city circle.dot{fill:var(--rm-node); stroke:var(--rm-city); stroke-width:calc(1.6px*var(--u))}
.rm-city text{font-size:calc(10.5px*var(--u)*var(--m)); font-weight:600; fill:var(--rm-text-soft); paint-order:stroke; stroke:var(--rm-sea); stroke-width:calc(3px*var(--u)); stroke-linejoin:round; pointer-events:none}
.rm-city:hover circle.ring,.rm-city:focus-visible circle.ring{r:calc(10px*var(--u))}
.rm-city.is-sel circle.dot{fill:var(--rm-city); stroke:var(--rm-node); stroke-width:calc(2px*var(--u))}
.rm-city.is-sel text{display:none}
.rm-city.is-dim{opacity:.45}
/* этапы-точки: круг с номером, таможня — квадрат; статусы сделки — цвет обводки */
.rm-st{cursor:pointer}
.rm-st .halo{fill:var(--rm-halo); r:0; transition:r .18s}
.rm-st:hover .halo,.rm-st:focus-visible .halo,.rm-st.is-open .halo{r:calc(13px*var(--u))}
.rm-st .core{fill:var(--rm-node); stroke:var(--rm-node-stroke); stroke-width:calc(1.6px*var(--u))}
.rm-st.is-open .core{fill:var(--rm-core); stroke:var(--rm-node)}
.rm-st .num{font-size:calc(9.5px*var(--u)*var(--m)); font-weight:800; fill:var(--rm-text); text-anchor:middle; dominant-baseline:central; pointer-events:none}
.rm-st.is-open .num{fill:var(--rm-node)}
.rm-st.is-done .core{stroke:var(--rm-done)}
.rm-st.is-done .num{fill:var(--rm-done)}
.rm-st.is-active .core{stroke:var(--rm-gps); stroke-width:calc(2.2px*var(--u))}
.rm-st.is-active .num{fill:var(--rm-gps)}
.rm-st.is-open.is-done .num,.rm-st.is-open.is-active .num{fill:var(--rm-node)}
.rm-st.customs .core{rx:calc(2.5px*var(--u))}
/* первое открытие: точки этапов и выбранный город подмигивают, пока человек не нажмёт первый раз */
.rm-live.first-hint .rm-st .halo,.rm-live.first-hint .rm-city.is-sel circle.ring{animation:rm-nudge 1.4s ease-out 4}
@keyframes rm-nudge{0%{r:0}40%{r:calc(14px*var(--u))}100%{r:0}}
@media (max-width:640px){
  .rm-live .rm-city text{display:none}
  .rm-live .rm-city circle.dot{opacity:.75}
  .rm-live .rm-node.role-origin text,.rm-live .rm-node.role-port text{display:none}
  .rm-live .rm-geo text.land{font-size:calc(9px*var(--u))}
  .rm-live .rm-gl,.rm-live .rm-grat,.rm-live .scale,.rm-live .rm-geo text:not(.land){display:none}
}

/* --- блок главной: выбор направления, карта, сводка, лента, панель --- */
.rl .rl-stage{display:grid; grid-template-columns:minmax(0,1fr); gap:16px; align-items:start}
@media (min-width:1000px){.rl .rl-stage{grid-template-columns:minmax(0,1fr) 380px}}
.rl-bar{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; background:var(--srf-hi); border:1px solid var(--glass-line-outer); border-radius:var(--r-md); padding:10px 14px; margin-bottom:12px}
.rl-grp{display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rl-lb{font:700 10.5px/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint)}
.rl-seg{display:inline-flex; background:var(--srf-mid); border:1px solid var(--glass-line-outer); border-radius:60px; padding:3px}
.rl-seg button{border:0; background:transparent; color:var(--ink-soft); font:600 13px/1.2 var(--font); padding:6px 13px; border-radius:60px; cursor:pointer; white-space:nowrap}
.rl-seg button[aria-pressed="true"]{background:var(--ink); color:var(--amb-0)}
.rl-sel{appearance:none; -webkit-appearance:none; font:600 14px/1.2 var(--font); color:var(--ink); border:1px solid var(--glass-line-outer); border-radius:60px; padding:8px 32px 8px 14px; min-width:200px; cursor:pointer;
  background:var(--srf-hi) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1l5 5 5-5' fill='none' stroke='%237c8b9c' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center}
.rl-sel:disabled,.rl-btn:disabled{opacity:.5; cursor:default}
.rl-btn{border:0; border-radius:60px; padding:9px 14px; font:700 13px/1.2 var(--font); background:var(--ink); color:var(--amb-0); cursor:pointer; display:inline-flex; align-items:center; gap:6px; white-space:nowrap}
.rl-btn svg{width:14px; height:14px}
.rl-note{font:500 12.5px/1.45 var(--font); color:var(--ink-faint); flex-basis:100%; margin:0}
.rl-note.ok{color:var(--ok)}
.rl-note.warn{color:var(--warn)}
.rl-map{position:relative; border-radius:var(--r-lg); overflow:hidden; background:var(--rm-sea); border:1px solid var(--glass-line-outer); box-shadow:var(--lift-1); scroll-margin-top:84px} /* под плавающей шапкой, когда шторка подкручивает страницу к карте */
.rl-map svg.route-map{display:block; width:100%; height:auto}
.rl-hint{position:absolute; left:14px; bottom:14px; font:600 12.5px/1.4 var(--font); color:var(--rm-pill-text); background:var(--rm-pill); border-radius:10px; padding:7px 12px; pointer-events:none; max-width:min(62%,460px); transition:background .35s,color .35s,box-shadow .35s}
.rl-hint b{font-weight:800}
.rl-hint.first{background:var(--ink); color:var(--amb-0); box-shadow:0 12px 28px -10px rgba(5,16,29,.55); animation:rl-pop 1.4s cubic-bezier(.22,1,.36,1) 4}
@keyframes rl-pop{0%{transform:translateY(0)}35%{transform:translateY(-7px)}100%{transform:translateY(0)}}
.rl-legend{position:absolute; right:14px; top:12px; display:flex; gap:10px; padding:6px 10px; border-radius:8px; background:var(--rm-pill); color:var(--rm-pill-text); font:600 11px/1.3 var(--font)}
.rl-legend i{display:inline-block; width:14px; height:0; border-top:2px dashed var(--rm-leg-sea); vertical-align:middle; margin-right:5px}
.rl-legend i.land{border-top-color:var(--rm-leg-land)}
.rl-legend i.city{width:9px; height:9px; border:2px solid var(--rm-city); border-radius:50%; background:var(--rm-node)}
.rl-sum{display:flex; flex-wrap:wrap; align-items:center; gap:10px 22px; background:var(--srf-hi); border:1px solid var(--glass-line-outer); border-radius:var(--r-md); padding:12px 16px; margin-top:12px}
.rl-sum .ttl{font:800 15px/1.3 var(--font); color:var(--ink)}
.rl-sum .kv{display:flex; flex-direction:column; gap:1px}
.rl-sum .k{font:700 10.5px/1.2 var(--font); letter-spacing:.1em; text-transform:uppercase; color:var(--ink-faint)}
.rl-sum .v{font:600 15px/1.2 var(--font); color:var(--ink); font-variant-numeric:tabular-nums}
.rl-sum .v small{font-weight:600; font-size:12px; color:var(--ink-soft)}
.rl-pill{display:inline-flex; align-items:center; font:700 12px/1.2 var(--font); padding:4px 10px; border-radius:60px; border:1px solid var(--warn); background:var(--warn-bg); color:var(--warn)}
.rl-pill.deal{border-color:var(--accent); background:var(--accent-ghost); color:var(--accent)}
.rl-rail{display:grid; grid-template-columns:repeat(7,1fr); gap:8px; margin-top:12px}
.rl-rail button{display:flex; flex-direction:column; align-items:flex-start; gap:3px; text-align:left; background:var(--srf-hi); border:1px solid var(--glass-line-outer); border-radius:12px; padding:10px 12px; cursor:pointer; color:var(--ink-soft); min-height:64px; font-family:var(--font)}
.rl-rail .n{font:600 11px/1.2 var(--font); color:var(--ink-faint)}
.rl-rail .t{font:700 13px/1.25 var(--font); color:var(--ink)}
.rl-rail .s{font:600 11px/1.3 var(--font); color:var(--ink-faint)}
.rl-rail button[aria-current="true"]{border-color:var(--accent); box-shadow:0 0 0 2px var(--accent-ghost)}
.rl-rail button.is-done .s{color:var(--ok)}
.rl-rail button.is-active .s{color:var(--rm-gps)}
.rl-panel{background:var(--srf-hi); border:1px solid var(--glass-line-outer); border-radius:var(--r-lg); box-shadow:var(--lift-1); position:sticky; top:104px; max-height:calc(100vh - 120px); overflow:auto; display:none}
@media (min-width:1000px){.rl-panel{display:block}}
.rl-pc{padding:18px 20px 22px}
/* Кадр этапа — полоса 4:1 над рассказом (Л10). Пропорция задана ЗДЕСЬ и в
   logistics/stage_photos.py (BAND); расхождение сторожит тест: полоса шире съёмки
   режет кадр, уже — оставляет поля. Полоса, а не кадр: панель справа — колонка
   380px, и при 3:2 картинка съедала бы четверть её высоты (см. докстринг реестра).
   Кадр вставлен ВНУТРЬ отступов панели, не в край: у неё три места установки
   (панель, шторка, блок под картой сделки) с разными паддингами. */
.rl-shot{position:relative; margin:0 0 14px; border-radius:12px; overflow:hidden; background:var(--srf-mid)}
.rl-shot img{display:block; width:100%; height:auto; aspect-ratio:4/1; object-fit:cover}
/* Скрим подписи — литералы, а не токены палитры: это затенение самой фотографии,
   одинаковое во всех трёх темах (та же конвенция, что у обложки выпуска журнала, С53). */
.rl-shot figcaption{position:absolute; right:7px; bottom:6px; font:600 10px/1.2 var(--font); letter-spacing:.06em;
  text-transform:uppercase; color:#fff; background:rgba(7,26,51,.55); padding:3px 7px; border-radius:60px}
.rl-eyebrow{font:700 10.5px/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.rl-h{font:700 21px/1.2 var(--font-display); margin:4px 0 2px; color:var(--ink); text-wrap:balance}
.rl-role{font:500 12.5px/1.4 var(--font); color:var(--ink-faint); margin:0 0 12px}
.rl-h3{font:700 10.5px/1.2 var(--font); letter-spacing:.12em; text-transform:uppercase; color:var(--ink-faint); margin:16px 0 6px}
.rl-ul{margin:0; padding:0 0 0 18px; color:var(--ink-soft); font:500 14px/1.45 var(--font)}
.rl-ul li{margin:0 0 5px}
.rl-docs{display:flex; flex-wrap:wrap; gap:6px}
.rl-doc{font:600 12px/1.3 var(--font); padding:3px 9px; border-radius:60px; background:var(--accent-ghost); color:var(--accent)}
.rl-kv2{display:grid; grid-template-columns:1fr 1fr; gap:8px; margin-top:10px}
.rl-kv2>div{background:var(--srf-mid); border:1px solid var(--glass-line-outer); border-radius:10px; padding:8px 10px}
.rl-kv2 .k{font:700 10.5px/1.2 var(--font); letter-spacing:.08em; text-transform:uppercase; color:var(--ink-faint)}
.rl-kv2 .v{font:700 13.5px/1.3 var(--font); color:var(--ink); margin-top:2px}
.rl-callout{margin-top:14px; border-left:3px solid var(--warn); background:var(--warn-bg); border-radius:10px; padding:9px 12px; font:500 13px/1.45 var(--font); color:var(--ink-soft)}
.rl-empty{color:var(--ink-faint); font:500 14px/1.4 var(--font); padding:26px 0; text-align:center}
.rl-status{display:inline-flex; align-items:center; font:700 11.5px/1.2 var(--font); padding:3px 9px; border-radius:60px}
.rl-status.done{background:var(--ok-bg); color:var(--ok)}
.rl-status.active{background:var(--warn-bg); color:var(--rm-gps)}
.rl-status.pending{background:var(--srf-mid); color:var(--ink-faint); border:1px solid var(--glass-line-outer)}
.rl-tl{list-style:none; padding:0; margin:4px 0 0}
.rl-tl li{display:grid; grid-template-columns:78px 1fr; gap:10px; padding:7px 0; border-bottom:1px solid var(--glass-line-outer); font:500 13.5px/1.4 var(--font); color:var(--ink-soft)}
.rl-tl li:last-child{border-bottom:none}
.rl-tl .d{font:600 12px/1.4 var(--font); color:var(--ink-faint); font-variant-numeric:tabular-nums}
.rl-tl li.now,.rl-tl li.now .d{color:var(--rm-gps); font-weight:600}
.rl-nav{display:flex; justify-content:space-between; gap:8px; margin-top:18px; padding-top:12px; border-top:1px solid var(--glass-line-outer)}
.rl-nav button{border:1px solid var(--glass-line-outer); background:var(--srf-hi); color:var(--ink-soft); font:700 12.5px/1.2 var(--font); padding:7px 12px; border-radius:60px; cursor:pointer; flex:1 1 0; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.rl-nav button:disabled{opacity:.35; cursor:default}
.rl-x{border:1px solid var(--glass-line-outer); background:var(--srf-hi); color:var(--ink-faint); width:32px; height:32px; border-radius:50%; cursor:pointer; font-size:13px; line-height:1; flex:none; display:grid; place-items:center}
/* блок этапа под картой сделки (Л9в): модалка узкая, панели справа там нет */
.rl-inline{display:none; background:var(--srf-hi); border:1px solid var(--glass-line-outer); border-radius:var(--r-md); margin:10px 0 12px; scroll-margin-top:8px}
.rl-inline.open{display:block}
.rl-inline .rl-ih{display:flex; justify-content:space-between; align-items:center; padding:10px 12px 0 20px}
.rl-inline .rl-pc{padding-top:6px}
/* --- шторка снизу: телефон и планшет (ниже 1000px) --- */
/* Закрытая шторка невидима и для фокуса (visibility), а не только уехала за экран: axe aria-hidden-focus. */
.rl-drawer{position:fixed; left:0; right:0; bottom:0; z-index:60; background:var(--srf-solid); border:1px solid var(--glass-line-outer); border-bottom:0; border-radius:18px 18px 0 0; box-shadow:0 -14px 40px -18px rgba(5,16,29,.45); transform:translateY(102%); visibility:hidden; transition:transform .28s cubic-bezier(.22,1,.36,1), visibility 0s linear .28s; display:flex; flex-direction:column; max-height:var(--dh,72vh)}
.rl-drawer.open{transform:none; visibility:visible; transition:transform .28s cubic-bezier(.22,1,.36,1), visibility 0s}
/* Заголовок шторки: кнопка-раскрытие и кнопка «закрыть» — соседи, не вложены друг в друга (axe nested-interactive). */
.rl-drawer-h{display:flex; align-items:center; gap:10px; padding:16px 12px 10px 12px; position:relative; flex:none}
.rl-dh{flex:1 1 auto; min-width:0; display:flex; align-items:center; justify-content:space-between; gap:10px; text-align:left; border:0; background:transparent; padding:0 0 0 4px; cursor:pointer; font:inherit; color:inherit}
.rl-dh .dh-txt{min-width:0}
.rl-drawer-h::before{content:""; position:absolute; left:50%; top:6px; width:40px; height:4px; border-radius:2px; background:var(--glass-line-outer); transform:translateX(-50%)}
.rl-drawer-h .dh-n{display:block; font:600 11px/1.2 var(--font); color:var(--accent); letter-spacing:.06em; text-transform:uppercase}
.rl-drawer-h .dh-t{display:block; font:800 15px/1.2 var(--font); color:var(--ink); margin-top:2px}
.rl-drawer-h .dh-s{display:block; font:500 12px/1.3 var(--font); color:var(--ink-faint); margin-top:2px}
.rl-drawer-h .chev{width:32px; height:32px; border-radius:50%; border:1px solid var(--glass-line-outer); display:grid; place-items:center; color:var(--ink-faint); transition:transform .25s; font-size:12px}
.rl-drawer.exp .rl-drawer-h .chev{transform:rotate(180deg)}
.rl-drawer .body{overflow:auto; display:none; border-top:1px solid var(--glass-line-outer); overscroll-behavior:contain}
.rl-drawer.exp .body{display:block}
.rl-drawer .rl-pc{padding-top:14px}
.rl-drawer .rl-eyebrow,.rl-drawer .rl-h{display:none}
/* РАСКРЫТАЯ шторка — во весь экран (просьба владельца 09.09: «минимум скрола»).
   Половина экрана под картой рассказ об этапе не вмещала, и человек листал его
   в окошке высотой в треть телефона. Свёрнутая шторка остаётся полоской внизу —
   ею же возвращаются к карте, поэтому связь «карта ↔ этап» не теряется.
   Высота в dvh, а не vh: мобильный браузер считает vh по развёрнутому окну, и
   низ уезжал под адресную строку (тот же урок, что у лайтбокса, С33.4). */
.rl-drawer.open.exp{top:0; height:100dvh; max-height:none; border-radius:0; border-left:0; border-right:0; box-shadow:none}
.rl-drawer.open.exp .body{flex:1 1 auto; min-height:0}
body.rl-full{overflow:hidden}
/* Переходы к соседним этапам прижаты ко дну: «дальше» доступно, не долистывая. */
.rl-drawer.exp .rl-nav{position:sticky; bottom:0; margin-top:14px; background:var(--srf-solid);
  padding-bottom:calc(10px + env(safe-area-inset-bottom))}
/* Плотная типографика раскрытой шторки — ради того же «минимум скрола»; ниже 11px
   не опускаемся (инвариант мобильного качества С26.1). */
.rl-drawer.exp .rl-pc{padding:12px 14px 0}
.rl-drawer.exp .rl-shot{margin-bottom:10px}
.rl-drawer.exp .rl-h3{margin:12px 0 5px}
.rl-drawer.exp .rl-ul{font-size:13.5px; line-height:1.4; padding-left:16px}
.rl-drawer.exp .rl-ul li{margin-bottom:4px}
.rl-drawer.exp .rl-doc{font-size:11.5px; padding:3px 8px}
.rl-drawer.exp .rl-kv2{gap:6px; margin-top:8px}
.rl-drawer.exp .rl-kv2>div{padding:6px 9px}
.rl-drawer.exp .rl-kv2 .v{font-size:12.5px}
.rl-drawer.exp .rl-callout{margin-top:10px; padding:8px 10px; font:500 12.5px/1.4 var(--font)}
body.rl-has-drawer{padding-bottom:84px}
@media (min-width:1000px){.rl-drawer{display:none}}
@media (max-width:900px) and (min-width:641px){.rl-rail{grid-template-columns:repeat(4,1fr)}}
@media (max-width:640px){
  .rl-bar{gap:8px 14px; padding:10px 12px}
  .rl-grp{width:100%}
  .rl-sel{flex:1 1 auto; min-width:0; font-size:16px} /* поле ввода 16px — иначе iOS зумит вьюпорт (инвариант мобильного слоя) */
  .rl-hint{left:8px; bottom:8px; font-size:11px; padding:5px 9px; max-width:72%; border-radius:8px}
  .rl-legend{display:none}
  .rl-sum{gap:8px 16px; padding:10px 12px}
  .rl-sum .ttl{flex-basis:100%; font-size:14px}
  .rl-sum .v{font-size:14px}
  .rl-rail{display:flex; overflow-x:auto; gap:8px; padding:2px 2px 8px; margin:12px -2px 0; scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch}
  .rl-rail button{flex:0 0 46%; scroll-snap-align:start; min-height:60px}
}
@media (prefers-reduced-motion: reduce){.rl-hint.first,.rm-live.first-hint .rm-st .halo,.rm-live.first-hint .rm-city.is-sel circle.ring{animation:none!important}}