/* SPA shell: Home + Demo views without full reload */

.spa-shell #view-home[hidden],
.spa-shell #view-demo[hidden] {
    display: none !important;
}

/* Until spa.js runs: avoid flashing home on /demo deep-link */
html.spa-boot-demo #view-home {
    display: none !important;
}

html.spa-boot-demo #view-demo {
    display: block !important;
}

.spa-shell.spa-view-demo {
    background: var(--rukki-surface, #f6f6f6);
}

.spa-shell.spa-view-demo .home-nav {
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}

.spa-demo-shell {
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 1rem 1rem 2rem;
    box-sizing: border-box;
}

.spa-shell.spa-view-demo .tab-panels {
    min-height: 520px;
    border: 0;
    border-radius: 0;
    background: transparent;
}

.spa-shell.spa-view-demo .demo-frame {
    min-height: calc(100vh - 220px);
    height: calc(100vh - 220px);
}

.home-nav__links a.is-active {
    color: var(--rukki-orange, #ff6633);
    font-weight: 600;
}