/* r2-matrica — стили варианта «Матрица решений», всё под корневым классом .r2 (канон v2.1: только токены shared.css и их rgba) */
.r2 .card__in{padding:18px 22px 18px;gap:0;min-height:0}
.r2 .rt__meta{display:none} /* счёт каталога переехал в подпись фигуры */

/* Фигура: инженерная рамка с метками-уголками */
.r2-fig{position:relative;margin:14px 0 0;padding:0 18px;border:1px solid var(--border-base);background:rgba(255,255,255,0.012)}
.r2-fig::before,.r2-fig::after{content:'';position:absolute;width:7px;height:7px;border:0 solid rgba(244,246,250,0.30);pointer-events:none}
.r2-fig::before{left:-1px;top:-1px;border-width:1px 0 0 1px}
.r2-fig::after{right:-1px;bottom:-1px;border-width:0 1px 1px 0}
.r2-fig__cap{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:4px 12px;padding:12px 0 11px;border-bottom:1px dashed var(--border-subtle);font:400 10.5px/1.2 var(--font-mono);letter-spacing:0.04em;color:var(--text-tertiary)}
.r2-fig__sum{font-size:9.5px;letter-spacing:0.10em;text-transform:uppercase;color:var(--text-dim)}

/* Матрица: ряды = направления, клетки = решения, контуры = слоты в сборке */
.r2-mx{display:flex;flex-direction:column;gap:10px;padding-top:15px}
.r2-row{display:flex;align-items:center;gap:12px}
.r2-row__l{flex:none;width:108px;font:400 9.5px/1 var(--font-mono);letter-spacing:0.10em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;transition:color 600ms ease}
.r2-short{display:none}
.r2-row__c{flex:1;min-width:0;display:flex;justify-content:space-between;height:14px}
.r2-cell{--d:0ms;position:relative;flex:none;width:14px;height:14px;background:rgba(244,246,250,0.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);cursor:pointer;
  transition:background-color 700ms ease,box-shadow 700ms ease}
.r2-cell--slot{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.09);cursor:default}
/* покой: волна и мерцание */
.r2-cell.is-scan{background:rgba(244,246,250,0.30)}
.r2-cell--slot.is-scan{background:rgba(255,255,255,0.04);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.21)}
.r2-cell.is-tw{background:rgba(244,246,250,0.46)}
.r2-cell--slot.is-tw{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.28)}

/* подбор: всё гаснет до призрачного каскадом, подошедшие светлеют, лучшая — коралловая с ореолом */
.r2[data-state=hit] .r2-cell,.r2[data-state=none] .r2-cell{transition-delay:var(--d);background:rgba(244,246,250,0.05);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04)}
.r2[data-state=hit] .r2-cell--slot,.r2[data-state=none] .r2-cell--slot{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.035)}
.r2[data-state=hit] .r2-cell.is-hit{background:rgba(244,246,250,0.82);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35),0 0 10px rgba(244,246,250,0.12)}
.r2[data-state=hit] .r2-cell.is-best{background:var(--red-muted);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.30),0 0 0 3px rgba(255,61,46,0.16),0 0 18px 2px rgba(255,61,46,0.42)}
.r2[data-state=hit] .r2-row__l,.r2[data-state=none] .r2-row__l{color:var(--text-dim)}
.r2[data-state=hit] .r2-row.is-best .r2-row__l{color:var(--text-primary)}
/* наведение: светлеет + ореол, без сдвига */
.r2 .r2-cell:not(.r2-cell--slot):hover{transition-duration:200ms;transition-delay:0ms;background:rgba(244,246,250,0.66);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.35),0 0 0 3px rgba(255,255,255,0.06),0 0 12px rgba(244,246,250,0.20)}
.r2[data-state=hit] .r2-cell.is-best:hover{background:var(--red-muted);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.45),0 0 0 3px rgba(255,61,46,0.24),0 0 22px 3px rgba(255,61,46,0.5)}

/* строка-считыватель под матрицей: подсказка наведения и итог подбора */
.r2-read{height:28px;text-align:right;font:400 9.5px/28px var(--font-mono);letter-spacing:0.10em;text-transform:uppercase;color:var(--text-dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r2-read b{font:500 10.5px/28px var(--font-sans);letter-spacing:0;text-transform:none;color:var(--text-secondary)}
.r2-read i{font-style:normal;color:var(--text-ghost);padding:0 6px}

/* выноска */
.r2-out{display:flex;flex-direction:column;min-height:128px;padding:4px 0 14px}
.r2-out>*{flex:1}
.r2-wait{display:flex;flex-direction:column;justify-content:center;gap:8px;padding:14px 16px;border:1px dashed var(--border-base);font:400 10px/1.6 var(--font-mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--text-dim)}
.r2-wait span{color:var(--text-ghost)}
.r2-none{display:flex;flex-direction:column;justify-content:center}
.r2-none p{margin:0}
.r2-callw{display:flex;flex-direction:column;filter:drop-shadow(0 8px 18px rgba(255,61,46,0.08))}
.r2-call{flex:1;display:flex;flex-direction:column;padding:1px;background:linear-gradient(225deg,rgba(255,125,106,0.95) 0 8.6px,rgba(255,61,46,0.45) 12px);
  clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%);animation:r2-in 460ms cubic-bezier(0.25,1,0.5,1) both}
.r2-call__in{flex:1;display:flex;flex-direction:column;padding:13px 16px 14px;background:linear-gradient(180deg,rgba(255,61,46,0.06),rgba(255,61,46,0.02)),var(--bg-surface-1);
  clip-path:polygon(0 0,calc(100% - 10.4px) 0,100% 10.4px,100% 100%,0 100%);transition:background var(--motion-hover)}
.r2-call:has(.r2-call__a:hover) .r2-call__in{background:linear-gradient(180deg,rgba(255,61,46,0.10),rgba(255,61,46,0.04)),var(--bg-surface-1)}
@keyframes r2-in{from{opacity:0;transform:translateY(4px)}}
.r2-call__k{display:flex;justify-content:space-between;gap:12px;margin-bottom:10px;font:400 9.5px/1 var(--font-mono);letter-spacing:0.10em;text-transform:uppercase;color:var(--text-dim)}
.r2-call__a{margin-bottom:12px;display:grid;grid-template-columns:1fr auto;grid-template-areas:"t go" "m go";column-gap:18px;row-gap:7px;align-items:end}
.r2-call__a:focus-visible{outline:1px solid rgba(255,125,106,0.6);outline-offset:4px}
.r2-call__t{grid-area:t;font:600 17px/1.3 var(--font-sans);letter-spacing:-0.01em;color:var(--text-primary)}
.r2-call__m{grid-area:m;font:400 10.5px/1.3 var(--font-mono);letter-spacing:0.04em;color:var(--text-tertiary)}
.r2-call__m b{font-weight:400;color:var(--text-secondary)}
.r2-call__go{grid-area:go;display:inline-flex;align-items:center;gap:8px;padding-bottom:1px;font:500 10.5px/1 var(--font-mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--text-secondary);white-space:nowrap;transition:color var(--motion-hover)}
.r2-call__go i{width:6px;height:6px;background:var(--emerald-core);box-shadow:0 0 8px rgba(27,222,138,0.45)}
.r2-call__a:hover .r2-call__go{color:var(--text-primary)}
.r2-call__more{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 8px;margin-top:auto;padding-top:9px;border-top:1px solid rgba(255,61,46,0.14);font-size:12.5px;line-height:1.45;color:var(--text-tertiary)}
.r2-call__more span{font:400 9.5px/1 var(--font-mono);letter-spacing:0.10em;text-transform:uppercase;color:var(--text-dim)}
.r2-call__more a{color:var(--text-secondary);border-bottom:1px solid var(--border-nav);transition:color var(--motion-hover),border-color var(--motion-hover)}
.r2-call__more a:hover{color:var(--text-primary);border-color:rgba(255,255,255,0.3)}
.r2-call__more i{font-style:normal;color:var(--text-ghost)}
.r2-call__more--near{border-top-style:dashed;border-top-color:var(--border-base)}
.r2-call__more--near a{color:var(--text-tertiary)}

/* ломаная от лучшей клетки к выноске */
.r2-wire{position:absolute;left:0;top:0;width:100%;height:100%;overflow:visible;pointer-events:none;opacity:0;transition:opacity 200ms ease}
.r2-wire.is-on{opacity:1}
.r2-wire__p{fill:none;stroke:rgba(255,125,106,0.62);stroke-width:1;shape-rendering:crispEdges}
.r2-wire__a{fill:var(--red-muted);opacity:0}
.r2-wire.is-done .r2-wire__a{opacity:1;transition:opacity 260ms ease var(--wd,0ms)}

/* легенда */
.r2-leg{display:flex;flex-wrap:wrap;align-items:center;gap:8px 18px;padding:10px 0 11px;border-top:1px dashed var(--border-subtle);font:400 9.5px/1 var(--font-mono);letter-spacing:0.10em;text-transform:uppercase;color:var(--text-dim)}
.r2-leg>span{display:inline-flex;align-items:center;gap:7px}
.r2-sw{display:block;width:8px;height:8px;background:rgba(244,246,250,0.17);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06)}
.r2-sw--hit{background:rgba(244,246,250,0.82)}
.r2-sw--slot{background:transparent;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.16)}
.r2-leg__r{margin-left:auto}

/* неподвижный режим: без переходов и появления */
.r2--static .r2-cell,.r2--static .r2-row__l,.r2--static .r2-wire,.r2--static .r2-wire__a{transition:none !important}
.r2--static .r2-call{animation:none}
@media (prefers-reduced-motion:reduce){.r2 *{animation:none !important;transition:none !important}}

/* телефон: плоско, клетки мельче, выноска — обычной карточкой под матрицей, без линии */
@media (max-width:640px){
  .r2 .card__in{padding:16px 14px 16px}
  .r2-fig{padding:0 12px;margin-top:14px}
  .r2-mx{gap:9px;padding-top:14px}
  .r2-row{gap:8px}
  .r2-row__l{width:52px}
  .r2-full{display:none}.r2-short{display:inline}
  .r2-row__c{height:10px}
  .r2-cell{width:10px;height:10px}
  .r2-read{text-align:left;height:28px;line-height:28px}
  .r2-wire{display:none}
  .r2-out{min-height:0;padding-bottom:12px}
  .r2-call__a{grid-template-columns:1fr;grid-template-areas:"t" "m" "go"}
  .r2-call__go{margin-top:6px}
  .r2-call__t{font-size:16px}
  .r2-leg{gap:8px 14px}
  .r2-leg .r2-leg__r{display:none}
  .r2-k-dir{display:none}
}