/* r6-dok — «Док-станция»: пачка кассет Картотеки + рука-манипулятор + порт, в который кассета втыкается как флешка и загорается.
   Геометрия и грани — по r1-kartoteka. Только токены shared.css и их rgba. Переменные движения (--ax --ay --az, --dx --y --z, --dur) ставит JS. */
.r6{position:relative;display:flex;flex-direction:column;gap:4px;width:100%;min-width:0;--dur:400ms;--ease:cubic-bezier(0.22,0.9,0.24,1)}
.hero-art.r-art--v6{min-width:0}
.r6-term .card__in{min-height:0;padding:18px 20px 16px}

/* сцена: перспектива, три четверти — правый край ближе; док стоит спереди справа */
.r6-stage{position:relative;height:402px;overflow:hidden}
.r6-scene{position:absolute;inset:0;perspective:2100px;perspective-origin:50% 18%;pointer-events:none}
.r6-rig{position:absolute;left:40%;top:284px;width:0;height:0;transform-style:preserve-3d;transform:rotateX(-13deg) rotateY(-27deg)}
.r6-f{position:absolute;display:block;backface-visibility:hidden;-webkit-backface-visibility:hidden}
.r6-f::after{content:'';position:absolute;inset:0;background:var(--bg-root);opacity:0;pointer-events:none;transition:opacity 500ms ease}
.r6-anc{position:absolute;left:-1px;top:-1px;width:2px;height:2px;visibility:hidden}

/* рейка-пачка */
.r6-shadow{background:radial-gradient(closest-side,var(--bg-root),transparent);opacity:.9}
.r6-rail-top{clip-path:polygon(0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,255,255,0.03),rgba(255,255,255,0.075)),var(--bg-surface-1);box-shadow:inset 0 -1px 0 rgba(255,255,255,0.12)}
.r6-rail-front{background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.01)),var(--bg-surface-1);box-shadow:inset 0 1px 0 rgba(255,255,255,0.1)}
.r6-rail-front::before{content:'';position:absolute;left:14px;right:6px;top:5px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,125,106,0.30) 10%,rgba(255,125,106,0.30) 94%,rgba(255,125,106,0.14));box-shadow:0 0 6px rgba(255,61,46,0.3)}
.r6-rail-end{background:linear-gradient(180deg,rgba(255,255,255,0.02),transparent),var(--bg-root);box-shadow:inset 1px 0 0 rgba(255,255,255,0.06)}
.r6-rail-cham{background:linear-gradient(180deg,rgba(255,255,255,0.1),rgba(255,255,255,0.03)),var(--bg-surface-1)}
.r6-slot{background:var(--bg-root);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.05)}
.r6-slot::before{content:'';position:absolute;inset:0;box-shadow:inset 0 0 12px rgba(255,61,46,0.45);opacity:0;transition:opacity 500ms ease}
.r6-slot.is-on::before{opacity:1}

/* кассета: вся — translate3d(--x + --dx, --y, --z); движется только по подбору */
.r6-c{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;
  transform:translate3d(calc(var(--x) + var(--dx,0px)),var(--y,0px),calc(var(--z0,0px) + var(--z,0px)));transition:transform var(--dur) var(--ease)}
.r6-c .r6-f{pointer-events:auto;cursor:pointer}
.r6-f--front{padding:0;border:0;margin:0;font:inherit;color:inherit;text-align:left;
  background:linear-gradient(180deg,rgba(255,255,255,0.17),rgba(255,255,255,0.05));
  clip-path:polygon(2px 0,calc(100% - 12px) 0,100% 12px,100% 100%,0 100%,0 2px)}
.r6-f__in{position:absolute;inset:1px 1px 0 1px;display:flex;flex-direction:column;padding:9px 8px 0;
  clip-path:polygon(2px 0,calc(100% - 11.4px) 0,100% 11.4px,100% 100%,0 100%,0 2px);
  background:repeating-linear-gradient(90deg,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px),
    linear-gradient(158deg,rgba(255,255,255,0.08),rgba(255,255,255,0.015) 46%,transparent 72%),var(--bg-card)}
.r6-f__in::before{content:'';position:absolute;inset:0;background:rgba(255,255,255,0.055);opacity:0;transition:opacity var(--motion-hover)}
.r6-c:hover .r6-f__in::before,.r6-f--front:focus-visible .r6-f__in::before{opacity:1}
.r6-f--front:focus-visible{outline:none}
.r6-f--front:focus-visible .r6-f__in::before{box-shadow:inset 0 0 0 1.5px rgba(244,246,250,0.55)}
.r6-n{position:relative;font:500 11px/1 var(--font-mono);letter-spacing:0.06em;color:var(--text-secondary)}
.r6-led{position:absolute;right:9px;top:30px;width:6px;height:6px;background:rgba(255,255,255,0.10);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.06);transition:background 300ms ease,box-shadow 300ms ease}
.r6-mk{position:relative;display:block;width:14px;height:2px;margin-top:8px;background:rgba(255,255,255,0.16)}
.r6-nm{position:relative;margin-top:auto;font:500 9px/1.35 var(--font-mono);letter-spacing:0.1em;text-transform:uppercase;color:rgba(244,246,250,0.86)}
.r6-ct{position:relative;margin:5px 0 20px;max-width:100%;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;font:400 8.5px/1 var(--font-mono);letter-spacing:0.04em;color:var(--text-dim)}
.r6-edge{position:absolute;left:2px;right:11px;top:0;height:1.5px;opacity:0;transition:opacity 420ms ease;
  background:linear-gradient(90deg,rgba(255,125,106,0.2),rgba(255,125,106,0.95));box-shadow:0 0 10px rgba(255,61,46,0.6)}
.r6-edge::after{content:'';position:absolute;left:0;right:0;top:1.5px;height:26px;background:linear-gradient(180deg,rgba(255,61,46,0.07),transparent)}
.r6-f--r{background:linear-gradient(180deg,rgba(255,255,255,0.05),rgba(255,255,255,0.012) 64%),var(--bg-surface-1);box-shadow:inset 1px 0 0 rgba(255,255,255,0.1)}
.r6-f--l{background:var(--bg-root)}
.r6-f--b{background:var(--bg-root)}
.r6-f--t{background:linear-gradient(0deg,rgba(255,255,255,0.15),rgba(255,255,255,0.07)),var(--bg-surface-1)}
.r6-f--ch{background:linear-gradient(0deg,rgba(255,255,255,0.22),rgba(255,255,255,0.1)),var(--bg-surface-1)}
.r6-f--t::before,.r6-f--ch::before{content:'';position:absolute;inset:0;opacity:0;transition:opacity 420ms ease;
  background:linear-gradient(0deg,rgba(255,125,106,0.95) 0 1.5px,rgba(255,61,46,0.16) 1.5px,transparent 100%)}
/* цель подбора — тонкая коралловая кромка; воткнутая — «загорелась»: кромка ярче, грани теплее, лампа изумрудом (единственная точка результата) */
.r6-c.is-hot .r6-edge{opacity:.55}
.r6-c.is-hot .r6-f--t::before,.r6-c.is-hot .r6-f--ch::before{opacity:.6}
.r6-c.is-docked .r6-edge,.r6-c.is-docked .r6-f--t::before,.r6-c.is-docked .r6-f--ch::before{opacity:1}
.r6-c.is-docked .r6-f__in{background:linear-gradient(180deg,rgba(255,61,46,0.10),transparent 42%),
  repeating-linear-gradient(90deg,rgba(255,255,255,0.012) 0 1px,transparent 1px 3px),linear-gradient(158deg,rgba(255,255,255,0.10),rgba(255,255,255,0.02) 46%,transparent 72%),var(--bg-card)}
.r6-c.is-docked .r6-mk{background:rgba(255,255,255,0.32)}
.r6-c.is-docked .r6-led{background:var(--emerald-core);box-shadow:0 0 8px rgba(27,222,138,0.6),inset 0 0 0 1px rgba(27,222,138,0.4)}
.r6-c.is-held .r6-f--t,.r6-c.is-held .r6-f--r{filter:brightness(1.12)}
.r6-c:hover .r6-f--t,.r6-c:hover .r6-f--r{filter:brightness(1.18)}

/* док: коробка с разъёмом в крышке; лицо — табло «порт · 04 · Дилер» и лампа; при втыкании — паз и свет из-под корпуса */
.r6-dock{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d}
.r6-d-shadow{background:radial-gradient(closest-side,rgba(8,9,12,0.95),transparent);transition:background 600ms ease}
.r6--on .r6-d-shadow{background:radial-gradient(closest-side,rgba(8,9,12,0.95) 30%,transparent),radial-gradient(60% 50% at 50% 42%,rgba(255,61,46,0.28),transparent)}
.r6-d-inner{background:var(--bg-root)}
.r6-d-top{clip-path:polygon(evenodd,0 0,100% 0,100% calc(100% - 14px),calc(100% - 14px) 100%,0 100%,0 0,
  14px 16px,90px 16px,90px 48px,14px 48px,14px 16px);
  background:linear-gradient(180deg,rgba(255,255,255,0.04),rgba(255,255,255,0.10)),var(--bg-surface-1);box-shadow:inset 0 -1px 0 rgba(255,255,255,0.12)}
.r6-d__slot{position:absolute;left:12px;top:14px;width:80px;height:36px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10);transition:box-shadow 500ms ease}
.r6--on .r6-d__slot{box-shadow:inset 0 0 0 1px rgba(255,125,106,0.75),inset 0 0 10px rgba(255,61,46,0.45),0 0 12px rgba(255,61,46,0.35)}
.r6-d-front{display:flex;flex-direction:column;gap:5px;padding:12px 12px 10px;
  background:linear-gradient(180deg,rgba(255,255,255,0.12),rgba(255,255,255,0.03) 50%,rgba(255,255,255,0.05)),var(--bg-card);box-shadow:inset 0 1px 0 rgba(255,255,255,0.12)}
.r6-d__k{font:500 8.5px/1 var(--font-mono);letter-spacing:0.14em;text-transform:uppercase;color:var(--text-dim)}
.r6-d__n{font:500 22px/1 var(--font-mono);letter-spacing:-0.02em;color:var(--text-primary);transition:color 400ms ease}
.r6-d__nm{font:400 9px/1.3 var(--font-mono);letter-spacing:0.08em;text-transform:uppercase;color:var(--text-tertiary);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.r6-d__led{position:absolute;right:11px;bottom:11px;width:6px;height:6px;background:rgba(255,255,255,0.12);transition:background 400ms ease,box-shadow 400ms ease}
.r6--on .r6-d__led{background:var(--red-muted);box-shadow:0 0 8px rgba(255,61,46,0.7)}
.r6--none .r6-d__n{color:var(--text-dim)}
.r6-d-end{background:linear-gradient(180deg,rgba(255,255,255,0.06),rgba(255,255,255,0.015) 64%),var(--bg-surface-1);box-shadow:inset 1px 0 0 rgba(255,255,255,0.1)}
.r6-d-cham{background:linear-gradient(180deg,rgba(255,255,255,0.16),rgba(255,255,255,0.05)),var(--bg-surface-1)}
.r6-d-back{background:var(--bg-root)}

/* рука: стержень уходит вверх за край сцены, захват — плита с губой на крышке кассеты */
.r6-arm{position:absolute;left:0;top:0;width:0;height:0;transform-style:preserve-3d;transform:translate3d(var(--ax),var(--ay),var(--az));transition:transform var(--dur) var(--ease)}
.r6-a-rod{background:linear-gradient(90deg,rgba(255,255,255,0.22),rgba(255,255,255,0.08) 60%,rgba(255,255,255,0.14)),var(--bg-surface-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.08)}
.r6-a-head{background:linear-gradient(0deg,rgba(255,255,255,0.16),rgba(255,255,255,0.06)),var(--bg-surface-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.12)}
.r6-a-lip{background:linear-gradient(180deg,rgba(255,255,255,0.14),rgba(255,255,255,0.04)),var(--bg-surface-1);box-shadow:inset 0 0 0 1px rgba(255,255,255,0.10)}
.r6-a-lip::after{content:'';position:absolute;left:3px;right:3px;bottom:1px;height:1px;background:rgba(255,125,106,0.9);box-shadow:0 0 6px rgba(255,61,46,0.6);opacity:0;transition:opacity 240ms ease}
.r6--grip .r6-a-lip::after{opacity:1}

/* «не нашлось» — пачка гаснет */
.r6--none .r6-c .r6-f::after{opacity:.5}
.r6--none .r6-rail-front::before{opacity:.4}

.r6-idle{position:absolute;left:0;right:0;top:50px;text-align:center;font:400 9.5px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim);opacity:0;transition:opacity 500ms ease}
.r6--idle .r6-idle{opacity:1;transition-delay:250ms}
.r6-cap{position:absolute;left:0;right:0;bottom:0;text-align:center;font:400 9.5px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-dim)}
.r6-cap i,.r6-co__k i,.r6-idle i{font-style:normal;color:var(--text-ghost);padding:0 6px}

/* лидер — коралловая линия ступенькой от воткнутой кассеты к бейджу: рисуется штрихом от якоря, квадратик-якорь на крышке кассеты */
.r6-lead{position:absolute;inset:0;width:100%;height:100%;z-index:2;pointer-events:none;overflow:visible}
.r6-lead__p{fill:none;stroke:rgba(255,125,106,0.7);stroke-width:1.25;stroke-linejoin:miter;filter:drop-shadow(0 0 4px rgba(255,61,46,0.45));
  transition:stroke-dashoffset 200ms ease}
.r6-lead.is-on .r6-lead__p{transition:stroke-dashoffset 480ms cubic-bezier(0.3,0.8,0.3,1)}
.r6-lead__a{fill:var(--bg-root);stroke:rgba(255,125,106,0.9);stroke-width:1;opacity:0;transition:opacity 200ms ease}
.r6-lead.is-on .r6-lead__a{opacity:1}
/* выноска — бейдж /OS на конце лидера: всплывает после линии */
.r6-co{position:absolute;left:0;top:0;z-index:3;width:312px;max-width:100%;opacity:0;visibility:hidden;transform:translateY(8px);
  transition:opacity 160ms ease,transform 200ms ease,visibility 0s linear 200ms}
.r6-co.is-on{opacity:1;visibility:visible;transform:none;
  transition:opacity 320ms ease 380ms,transform 520ms cubic-bezier(0.2,0.9,0.25,1) 380ms,visibility 0s}
.r6-co__box{position:relative;padding:1px;background:rgba(255,61,46,0.45);clip-path:polygon(0 0,calc(100% - 11px) 0,100% 11px,100% 100%,0 100%)}
.r6-co__box::after{content:'';position:absolute;right:-1px;top:-1px;width:12px;height:1.5px;background:linear-gradient(90deg,transparent,rgba(255,255,255,0.8));transform:rotate(45deg);transform-origin:right top}
.r6-co__in{position:relative;padding:12px 16px 13px;clip-path:polygon(0 0,calc(100% - 10.6px) 0,100% 10.6px,100% 100%,0 100%);
  background:linear-gradient(180deg,rgba(255,61,46,0.05),transparent 70%),var(--bg-surface-2)}
.r6-co__k{display:flex;justify-content:space-between;gap:12px;font:500 9.5px/1 var(--font-mono);letter-spacing:0.12em;text-transform:uppercase;color:var(--text-tertiary)}
.r6-co__k i{padding:0 5px}
.r6-co__t{display:inline-block;margin-top:10px;font:600 15.5px/1.3 var(--font-sans);letter-spacing:-0.01em;color:var(--text-primary);
  text-decoration:underline;text-decoration-color:transparent;text-decoration-thickness:1px;text-underline-offset:4px;transition:text-decoration-color var(--motion-hover)}
.r6-co__t:hover{text-decoration-color:rgba(244,246,250,0.38)}
.r6-co__f{display:flex;align-items:baseline;justify-content:space-between;gap:12px;margin-top:8px}
.r6-co__m{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font:400 10px/1.3 var(--font-mono);color:var(--text-tertiary)}
.r6-co__m em{font-style:normal;color:var(--red-muted)}
.r6-co__go{flex:none;font:500 11px/1 var(--font-mono);color:var(--text-primary);white-space:nowrap}
.r6-co__go i{font-style:normal;color:var(--red-muted);padding-left:6px;transition:padding var(--motion-hover)}
.r6-co__go:hover i{padding-left:9px}
.r6-co__alts{margin-top:11px;padding-top:9px;border-top:1px solid var(--border-subtle);display:flex;flex-direction:column;gap:6px}
.r6-co__alt{display:flex;align-items:baseline;gap:8px;min-width:0;font:400 11px/1.3 var(--font-mono);color:var(--text-secondary);transition:color var(--motion-hover)}
.r6-co__alt b{flex:none;font-weight:500;color:var(--text-dim)}
.r6-co__alt span{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r6-co__alt i{flex:none;font-style:normal;color:var(--text-dim)}
.r6-co__alt:hover{color:var(--text-primary)}
.r6-co--none .r6-co__box{background:rgba(255,255,255,0.12)}
.r6-co--none .r6-co__box::after{display:none}
.r6--static .r6-co.is-on{transition-delay:0s}
.r6-co--none .r6-co__in{background:var(--bg-surface-2)}
.r6-co__none{margin:10px 0 0;font-size:13.5px;line-height:1.5;color:var(--text-secondary)}
.r6-co__none a{color:var(--text-primary);border-bottom:1px solid var(--border-nav)}

/* мобильная полоса ярлыков — вместо пачки */
.r6-strip{display:none;grid-template-columns:repeat(6,minmax(0,1fr));gap:4px}
.r6-s{position:relative;display:flex;flex-direction:column;align-items:flex-start;gap:5px;min-width:0;padding:9px 6px 8px;cursor:pointer;
  background:var(--bg-surface-3);border:1px solid var(--border-base);color:var(--text-secondary);font:400 9.5px/1 var(--font-mono);letter-spacing:0.02em;
  transition:color var(--motion-hover),border-color var(--motion-hover),background var(--motion-hover),opacity 400ms ease}
.r6-s b{font-weight:500;color:var(--text-dim)}
.r6-s span{max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.r6-s::before{content:'';position:absolute;left:-1px;right:-1px;top:-1px;height:1.5px;background:rgba(255,125,106,0.95);box-shadow:0 0 8px rgba(255,61,46,0.5);opacity:0;transition:opacity 400ms ease}
.r6-s:hover{color:var(--text-primary);border-color:rgba(255,255,255,0.2)}
.r6-s.is-on{border-color:rgba(255,125,106,0.45);background:rgba(255,255,255,0.06);color:var(--text-primary)}
.r6-s.is-on::before{opacity:1}
.r6--none .r6-s{opacity:.5}

@media (max-width:1024px){.r6{max-width:620px;margin:0 auto}}
@media (max-width:640px){
  .r6{gap:10px}
  .r6-term .card__in{padding:16px 16px 14px}
  .r6-scene,.r6-cap,.r6-lead{display:none}
  .r6-stage{order:2;height:auto;min-height:96px;display:grid;overflow:visible}
  .r6-strip{display:grid;order:3}
  .r6-idle{position:static;grid-area:1/1;display:flex;align-items:center;justify-content:center;border:1px dashed var(--border-base);padding:0 12px;line-height:1.5}
  .r6:not(.r6--idle) .r6-idle{display:none}
  .r6-co{position:relative;grid-area:1/1;width:auto;left:auto !important;top:auto !important;transform:none}
  .r6-co:not(.is-on){display:none}
  .r6-co.is-on{animation:r6-in 450ms cubic-bezier(0.2,0.9,0.25,1) 80ms both}
  .r6-co__f{flex-wrap:wrap;row-gap:6px}
  .r6-s{padding:9px 4px 8px;font-size:9px;letter-spacing:0}
}
@keyframes r6-in{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}

.r6--static *,.r6--static *::before,.r6--static *::after{transition:none !important;animation:none !important}
@media (prefers-reduced-motion:reduce){.r6 *,.r6 *::before,.r6 *::after{transition:none !important;animation:none !important}}