/* Run 30c (TGL-4, D2): the rail on the marketing host (only with config('siteclick.marketing_rail')).
   Run 32b (HDR-2, r.11): the iframe spans the viewport so the app's media queries and vh match this page;
   clip-path shows and hit-tests only --mk-rail-w (SC_RAIL from the iframe) below the head (--sc-top, which
   mk-rail.js mirrors into the iframe with SC_RAIL_TOP). The iframe never resizes on scroll. The rail pushes the page (--mk-rail-push,
   body padding-right); the panes and rest sidebars lie over it. The '…' toggle and its count (TGL D2/D6)
   are styled by css/parts/sc-chrome-items.css; this file only gives it its column. */
.mk-rail-frame {
    position: fixed;
    inset: 0;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
    z-index: var(--sc-z-rail, 2147483010);
    clip-path: inset(var(--sc-top) 0 0 calc(100% - var(--mk-rail-w, 0px)));
    visibility: hidden;
}

.mk-rail-frame.is-on {
    visibility: visible;
    background: var(--sc-rail-bg);
}

/* toggles.css (--sc-motion) is not on this page: the same phase as the app's panes. */
body.mk-body {
    --mk-rail-motion: 280ms cubic-bezier(0.32, 0.72, 0, 1);
    padding-right: var(--mk-rail-push, 0px);
    transition: padding-right var(--mk-rail-motion);
}

@media (prefers-reduced-motion: reduce) {
    body.mk-body {
        --mk-rail-motion: 0ms;
    }
}

/* The '…' cell replaces the 40 px that MKT-1 keeps free at the end of the head. */
.mk-head .mk-head-end:has(.mk-head-rail-col) {
    padding-right: 0;
}

.mk-head .mk-head-user .mk-head-rail-col {
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: var(--sc-rail-w, 40px);
    margin-left: -.5rem;
}