.hwc-mobile-rail-handle { display: none; }
.hwc-rail-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 1px solid rgba(255,255,255,.25);
    border-left: 0;
    border-radius: 0 4px 4px 0;
    background: var(--hwc-blue);
    color: #fff;
    cursor: pointer;
}
.hwc-rail-toggle:focus-visible { outline: 2px solid #fff; outline-offset: -4px; }
.hwc-rail-toggle[aria-expanded="true"] .bi { transform: rotate(180deg); }
@media (max-width: 991.98px) {
    :root { --hwc-mobile-rail-width: var(--rail-width); }
    body.with-rail .hwc-content { margin-left: 24px; }
    .hwc-mobile-rail-handle {
        display: block;
        position: fixed;
        left: 0;
        top: var(--nav-height);
        bottom: 0;
        width: 24px;
        padding-top: 12px;
        background: var(--hwc-blue);
        z-index: 1035;
        transition: left .16s ease;
    }
    .hwc-mobile-rail-handle.is-open { left: var(--hwc-mobile-rail-width); }
    body.with-rail .hwc-rail {
        top: var(--nav-height);
        left: 0;
        width: var(--hwc-mobile-rail-width);
        height: calc(100vh - var(--nav-height));
        height: calc(100dvh - var(--nav-height));
        transform: translateX(-100%);
        visibility: hidden;
        overflow-y: auto;
        overflow-x: hidden;
        overscroll-behavior-y: contain;
        touch-action: pan-y;
        z-index: 1035;
        transition: transform .16s ease;
    }
    body.with-rail .hwc-rail.is-open { transform: translateX(0); visibility: visible; }
}
@media (prefers-reduced-motion: reduce) {
    .hwc-mobile-rail-handle,
    body.with-rail .hwc-rail { transition: none; }
}