/* Replica kit — the stage around a study replica when it is opened on its own.
   Only active with html.rk-stage, which the kit adds when the copy is opened on its own (a window or Open Design's preview).
   At the exact screen size (pixel checks) and inside our own pages' frames nothing here applies. */
html.rk-stage, html.rk-stage body { height: auto !important; min-height: 100%; overflow: auto !important; }
html.rk-stage, html.rk-stage body { background: #e8e8e6 !important; }
html.rk-stage body { margin: 0; padding: 32px 0 120px; font-synthesis: none; }
html.rk-stage.rk-dark, html.rk-stage.rk-dark body { background: #0c0f12 !important; }
html.rk-stage .rk-screen { margin: 0 auto; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 18px 48px rgba(0,0,0,.18); }
html.rk-stage.rk-dark .rk-screen { box-shadow: 0 0 0 1px rgba(255,255,255,.08), 0 18px 48px rgba(0,0,0,.6); }
.rk-bar { position: fixed; left: 50%; bottom: 20px; transform: translateX(-50%); z-index: 9999; width: max-content; max-width: calc(100vw - 24px); white-space: nowrap; display: flex; align-items: center; gap: 6px; padding: 6px;
  background: rgba(255,255,255,.92); backdrop-filter: blur(10px); border-radius: 12px; box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 8px 24px rgba(0,0,0,.16);
  font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; color: #222; }
html.rk-dark .rk-bar { background: rgba(32,34,38,.92); color: #eee; box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 8px 24px rgba(0,0,0,.5); }
.rk-bar .rk-title { padding: 0 10px 0 6px; color: #666; max-width: 320px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
html.rk-dark .rk-bar .rk-title { color: #aaa; }
.rk-seg { display: inline-flex; background: rgba(0,0,0,.06); border-radius: 8px; padding: 2px; }
html.rk-dark .rk-seg { background: rgba(255,255,255,.08); }
.rk-seg button, .rk-btn { border: 0; background: transparent; font: inherit; color: inherit; height: 30px; padding: 0 12px; border-radius: 6px; cursor: pointer; transition: background-color 120ms ease; }
.rk-seg button[aria-pressed="true"] { background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.15); }
html.rk-dark .rk-seg button[aria-pressed="true"] { background: #4a4d55; box-shadow: none; }
.rk-btn:hover, .rk-seg button:hover { background: rgba(0,0,0,.06); }
html.rk-dark .rk-btn:hover, html.rk-dark .rk-seg button:hover { background: rgba(255,255,255,.08); }
html .rk-bar .rk-btn[aria-pressed="true"], html .rk-bar .rk-btn[aria-pressed="true"]:hover { background: #2d6ce0; color: #fff; }
.rk-bar :focus-visible { outline: 2px solid #2d6ce0; outline-offset: 2px; }
.rk-score { padding: 0 8px; color: #2a7a3b; font-weight: 600; }
html.rk-dark .rk-score { color: #7bd88f; }
/* links back at the top of the stage (design system page, all screens) */
html.rk-stage.rk-has-nav body { padding-top: 64px; }
.rk-nav { position: absolute; left: 24px; top: 16px; z-index: 9999; display: flex; align-items: center; gap: 6px; padding: 4px; border-radius: 10px;
  background: rgba(255,255,255,.92); box-shadow: 0 0 0 1px rgba(0,0,0,.08), 0 4px 12px rgba(0,0,0,.08); font: 500 13px/1 system-ui, -apple-system, "Segoe UI", sans-serif; }
.rk-nav a { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 10px; border-radius: 6px; color: #222; text-decoration: none; transition: background-color 120ms ease; }
.rk-nav a + a { box-shadow: -7px 0 0 -6px rgba(0,0,0,.14); margin-left: 4px; }
.rk-nav a:hover { background: rgba(0,0,0,.06); }
.rk-nav a:focus-visible { outline: 2px solid #2d6ce0; outline-offset: 2px; }
html.rk-dark .rk-nav { background: rgba(32,34,38,.92); box-shadow: 0 0 0 1px rgba(255,255,255,.1), 0 4px 12px rgba(0,0,0,.4); }
html.rk-dark .rk-nav a { color: #eee; }
html.rk-dark .rk-nav a + a { box-shadow: -7px 0 0 -6px rgba(255,255,255,.18); }
html.rk-dark .rk-nav a:hover { background: rgba(255,255,255,.08); }
.rk-bar .rk-plain { box-shadow: inset 0 0 0 1px rgba(0,0,0,.12); }
html.rk-dark .rk-bar .rk-plain { box-shadow: inset 0 0 0 1px rgba(255,255,255,.16); }
/* compare: original screenshot over the copy, revealed by a draggable divider */
.rk-cmp { position: absolute; inset: 0; z-index: 9000; pointer-events: none; }
.rk-cmp img { position: absolute; left: 0; top: 0; width: 100%; height: 100%; clip-path: inset(0 0 0 var(--rk-x, 50%)); }
.rk-cmp .rk-line { position: absolute; top: 0; bottom: 0; left: var(--rk-x, 50%); width: 2px; margin-left: -1px; background: #2d6ce0; pointer-events: auto; cursor: ew-resize; }
.rk-cmp .rk-knob { position: absolute; top: 50%; left: 50%; width: 30px; height: 30px; margin: -15px 0 0 -15px; border-radius: 50%; background: #2d6ce0; color: #fff;
  display: grid; place-items: center; font: 600 13px/1 system-ui, sans-serif; box-shadow: 0 2px 8px rgba(0,0,0,.3); }
.rk-cmp .rk-tag { position: absolute; top: 8px; padding: 4px 8px; border-radius: 6px; background: rgba(0,0,0,.72); color: #fff; font: 600 11px/1 system-ui, sans-serif; letter-spacing: .02em; }
.rk-cmp .rk-tag.l { right: calc(100% - var(--rk-x, 50%) + 8px); }
.rk-cmp .rk-tag.r { left: calc(var(--rk-x, 50%) + 8px); }
/* small hint toast used by the replicas */
.rk-hint { position: fixed; left: 50%; top: 18px; transform: translateX(-50%) translateY(-8px); opacity: 0; z-index: 9999; padding: 8px 12px; border-radius: 8px;
  background: rgba(20,20,20,.86); color: #fff; font: 500 13px/1.3 system-ui, sans-serif; pointer-events: none; transition: opacity 160ms ease, transform 160ms ease; }
.rk-hint.show { opacity: 1; transform: translateX(-50%) translateY(0); }
@media (prefers-reduced-motion: reduce) { .rk-hint, .rk-seg button, .rk-btn, .rk-nav a { transition: none; } }