/* ============================================
   MOBILE-ONLY CSS (<=768px)
   ============================================ */

/* No sideways scroll, ever */
html,
body {
    overflow-x: hidden !important;
}

/* -------------------------------------------------
   MOBILE TOP NAV + HAMBURGER (FLOWING, NOT OVERLAY)
   ------------------------------------------------- */

/* Show hamburger on mobile */
.rbn-menu-toggle {
    display: inline-flex !important;
    flex-direction: column;
    justify-content: center;
    margin-left: 0.5rem;
    background: none;
    border: none;
    padding: 0.25rem;
}

.rbn-menu-toggle span {
    display: block;
    width: 20px;
    height: 2px;
    margin: 4px 0;
    background: #ddd;
    border-radius: 999px;
}

/* Topbar rearranges vertically */
.rbn-topbar__inner {
    flex-direction: column !important;
    align-items: stretch !important;
    padding: 0.5rem 0.75rem !important;
    max-width: 100% !important;
}

/* Logo + hamburger row */
.rbn-leftgroup {
    width: 100% !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    gap: 0.5rem !important;
}

/* The nav (menu) becomes a flowing block below the top row */
.rbn-nav {
    display: none !important;        /* default hidden */
    flex-direction: column !important;
    width: 100% !important;
    margin-top: 0.5rem !important;
    padding-top: 0.5rem !important;
    border-top: 1px solid rgba(255, 255, 255, 0.12) !important;

    position: static !important;      /* <-- FIXES overlay problem */
    background: transparent !important;
    gap: 0.5rem !important;
}

/* When JS toggles "is-open", show normally */
.rbn-nav.is-open {
    display: flex !important;
}

.rbn-nav li a {
    padding: 0.35rem 0 !important;
    font-size: 0.95rem !important;
}

/* -------------------------------------------------
   MAIN LAYOUT
   ------------------------------------------------- */

.rbn-main {
    max-width: 100vw !important;
    padding: 0.5rem !important;
    margin: 0 auto !important;
}

.rbn-main > .card {
    max-width: 100vw !important;
    margin: 0 auto !important;
    padding: 1rem !important;
}

/* -------------------------------------------------
   INSTANCE GRID — NO OVERFLOW
   ------------------------------------------------- */

#openInstancesContainer,
.rbn-instance-grid--proposal2,
.rbn-instance-card-link--proposal2,
.rbn-instance-card-shell--proposal2,
.rbn-instance-card--proposal2,
.rbn-instance-card__body,
.rbn-instance-card__thumb,
.rbn-instance-card__thumb--stacked {
    width: 100% !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
}

/* Replace grid with simple column list */
.rbn-instance-grid--proposal2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
}

/* Links behave like block-level cards */
.rbn-instance-card-link--proposal2 {
    display: block !important;
    margin: 0 auto !important;
}

/* -------------------------------------------------
   THUMBNAIL: STOP PUSHING OUTSIDE THE CARD
   ------------------------------------------------- */

.rbn-instance-card__thumb,
.rbn-instance-card__thumb--stacked,
.rbn-instance-card__thumb--stacked::before,
.rbn-instance-card__thumb--stacked::after {
    transform: none !important;
}

.rbn-instance-card__thumb {
    min-height: 100px !important;
}

/* -------------------------------------------------
   MULTI-INSTANCE HEADER
   ------------------------------------------------- */

.rbn-instance-card--multi .rbn-instance-card__header {
    padding-right: 0 !important;
    flex-wrap: wrap !important;
    align-items: flex-start !important;
}

.rbn-instance-card--multi .rbn-instance-card__multi-indicator {
    position: static !important;
    margin-top: 0.25rem !important;
    margin-left: 0 !important;
}

/* -------------------------------------------------
   DRAWER: NORMAL FLOW (NO OVERLAP)
   ------------------------------------------------- */

.rbn-instance-card-shell--proposal2 .rbn-instance-card__drawer {
    position: static !important;
    margin-top: 0.5rem !important;
    width: 100% !important;

    display: none !important;
    flex-direction: column !important;

    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
}

/* When open, visible and pushes content down */
.rbn-instance-card-shell--proposal2.is-open .rbn-instance-card__drawer {
    display: flex !important;
}

/* Tappable full width buttons */
.rbn-instance-card__drawer-pill {
    width: 100% !important;
}

/* -------------------------------------------------
   SMALL TWEAKS
   ------------------------------------------------- */

.rbn-instance-card__header {
    gap: 0.5rem !important;
}