/* Run 27c (DSH-6): Design Hub overview — sticky section column (r.489–493)
   and the Timing demo (r.497). Run 28c (DSH-1): hub groups (r.749–755) and the
   smaller grouped nav (r.756). Colors only via tokens. */

/* ── Layout: sticky nav column + main; the column goes below 840 px of layout width ── */
.ds-hub-layout {
    container-type: inline-size;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0 32px;
}
.ds-hub-main {
    flex: 1;
    min-width: 0;
}
.ds-hub-nav {
    position: sticky;
    top: calc(var(--sc-top, 0px) + 16px);
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: calc(100vh - var(--sc-top, 0px) - var(--sc-head-h, 0px) - var(--sc-subhead-h, 0px) - var(--sc-bottom, 0px) - 48px);
    overflow-y: auto;
}
@container (max-width: 839px) {
    .ds-hub-nav { display: none; }
    /* Fix31 (A93): in the Design Hub the column becomes a sticky scroll strip above the
       content (full row, so the main wraps below it); the group headings drop out. */
    #ds-root .ds-hub-nav {
        display: flex;
        flex: 0 0 100%;
        flex-direction: row;
        align-items: center;
        gap: 4px;
        z-index: 2;
        top: var(--sc-top, 0px);
        max-height: none;
        margin-bottom: 16px;
        padding: 8px 0;
        overflow: auto hidden;
        scrollbar-width: none;
        background: var(--sc-color-bg);
    }
    #ds-root .ds-hub-nav-item {
        flex: none;
        padding: 4px 10px;
        white-space: nowrap;
    }
    #ds-root .ds-hub-nav-group { display: none; }
}
.ds-hub-nav-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 2px 8px;
    border-radius: var(--sc-radius-sm);
    color: var(--sc-color-text-muted);
    font-size: 12px;
    text-decoration: none;
    transition: background-color var(--sc-dur-fast) var(--sc-ease-out), color var(--sc-dur-fast) var(--sc-ease-out);
}
.ds-hub-nav-item:hover {
    color: var(--sc-color-text);
    background: var(--sc-overlay-subtle);
}
.ds-hub-nav-item.is-active {
    color: var(--sc-color-text-strong);
    background: var(--sc-color-primary-soft);
    font-weight: 500;
}
.ds-hub-nav-count {
    margin-left: auto;
    font-size: 11px;
    color: var(--sc-color-text-muted);
}

/* ── Groups: page section with its title, nav heading ── */
.ds-hub-group + .ds-hub-group {
    margin-top: 16px;
}
.ds-hub-group-title {
    margin-bottom: 16px;
    color: var(--sc-color-text-muted);
}
.ds-hub-nav-group {
    margin-top: 10px;
    padding: 0 8px 2px;
    font-size: 10px;
    font-weight: 400;
    color: var(--sc-color-text-subtle);
}
.ds-hub-nav-group:first-child {
    margin-top: 0;
}