/* Design Navigator refinement: compact axis landing, hidden native scrollbars, semantic cluster cards. */

section#td-color-hub {
    --td-hub-navigator-accent: #d94e46;
    --td-hub-navigator-accent-soft: rgba(217, 78, 70, 0.085);
    --td-hub-navigator-card-min: 18.5rem;
    --td-hub-navigator-shell-gap: 0.66rem;
}

section#td-color-hub[data-axis="room"] {
    --td-hub-navigator-accent: #3f7f6f;
    --td-hub-navigator-accent-soft: rgba(63, 127, 111, 0.1);
}

section#td-color-hub[data-axis="palette"] {
    --td-hub-navigator-accent: #7c5cff;
    --td-hub-navigator-accent-soft: rgba(124, 92, 255, 0.1);
}

section#td-color-hub[data-axis="style"] {
    --td-hub-navigator-accent: #b46b2d;
    --td-hub-navigator-accent-soft: rgba(180, 107, 45, 0.11);
}

section#td-color-hub[data-axis="material"] {
    --td-hub-navigator-accent: #6c7a4f;
    --td-hub-navigator-accent-soft: rgba(108, 122, 79, 0.11);
}

section#td-color-hub[data-axis="look"] {
    --td-hub-navigator-accent: #b24c7a;
    --td-hub-navigator-accent-soft: rgba(178, 76, 122, 0.1);
}

section#td-color-hub[data-axis="city"] {
    --td-hub-navigator-accent: #2f6f9f;
    --td-hub-navigator-accent-soft: rgba(47, 111, 159, 0.1);
    --td-hub-navigator-card-min: 20rem;
}

section#td-color-hub .td-hub-surface-console,
section#td-color-hub .td-hub-entity-explorer {
    border-left: 0.32rem solid var(--td-hub-navigator-accent);
}

section#td-color-hub .td-hub-surface-console {
    margin-bottom: 0;
    border-bottom-right-radius: 0;
    border-bottom-left-radius: 0;
    padding-block: clamp(0.85rem, 1.7vw, 1.15rem);
}

section#td-color-hub .td-hub-surface-console + .td-hub-entity-explorer {
    margin-top: calc(-0.5rem - 1px);
    border-top: 0;
    border-top-right-radius: 0;
    border-top-left-radius: 0;
}

section#td-color-hub .td-hub-surface-console + .td-hub-entity-explorer::before {
    display: none;
}

section#td-color-hub .td-hub-surface-console__description,
section#td-color-hub .td-hub-entity-explorer__description,
section#td-color-hub .td-hub-entity-explorer__axis-index-copy {
    max-width: 58rem;
}

section#td-color-hub .td-hub-surface-console .td-hub-axis-strip__items {
    scrollbar-width: none;
    padding-bottom: 0;
}

section#td-color-hub .td-hub-surface-console .td-hub-axis-strip__items::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

section#td-color-hub .td-hub-surface-console .td-hub-axis-strip__item {
    min-width: clamp(6.9rem, 13vw, 9.25rem);
    padding: 0.58rem 0.7rem;
}

@media (min-width: 960px) {
    section#td-color-hub .td-hub-surface-console .td-hub-axis-strip__items {
        flex-wrap: wrap;
        overflow-x: visible;
    }

    section#td-color-hub .td-hub-surface-console .td-hub-axis-strip__item {
        flex: 1 1 8.5rem;
        min-width: 0;
    }
}

section#td-color-hub .td-hub-entity-explorer--axis-landing .td-hub-entity-explorer__eyebrow {
    display: none;
}

/* Page-level breadcrumb chrome: visually promoted, semantically still owned by the explorer renderer. */
section#td-color-hub .td-hub-entity-explorer__trail {
    order: -3;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.28rem;
    width: fit-content;
    max-width: 100%;
    margin: 0 0 0.04rem;
    padding: 0.34rem 0.56rem;
    border: 1px solid rgba(29, 39, 51, 0.075);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.78);
    color: #66717d;
    font-size: 0.72rem;
    font-weight: 820;
    line-height: 1.12;
    box-shadow: 0 12px 28px -24px rgba(29, 39, 51, 0.68);
}

section#td-color-hub .td-hub-entity-explorer__trail[data-breadcrumb-scope="page"] {
    align-self: flex-start;
}

section#td-color-hub .td-hub-entity-explorer__trail a {
    color: inherit;
    text-decoration: none;
}

section#td-color-hub .td-hub-entity-explorer__trail a:hover,
section#td-color-hub .td-hub-entity-explorer__trail a:focus-visible {
    color: #1d2733;
    text-decoration: underline;
}

section#td-color-hub .td-hub-entity-explorer__trail span[aria-hidden="true"] {
    color: rgba(29, 39, 51, 0.32);
}

section#td-color-hub .td-hub-entity-explorer__trail-current {
    color: #1d2733;
    font-weight: 900;
}

section#td-color-hub .td-hub-entity-explorer__trail[data-breadcrumb-state="axis_landing"] .td-hub-entity-explorer__trail-current {
    color: var(--td-hub-navigator-accent);
}

section#td-color-hub .td-hub-entity-explorer__trail--entity-detail .td-hub-entity-explorer__trail-current {
    max-width: min(32rem, 70vw);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

section#td-color-hub .td-hub-entity-explorer__header {
    order: -1;
}

section#td-color-hub .td-hub-entity-explorer__axis-index {
    gap: 0.72rem;
    padding: clamp(0.75rem, 1.6vw, 0.92rem);
}

section#td-color-hub .td-hub-entity-explorer__axis-index-head[data-axis-index-head="compact"] {
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: end;
    gap: 0.45rem 1rem;
}

section#td-color-hub .td-hub-entity-explorer__axis-index-head[data-axis-index-head="compact"] .td-hub-entity-explorer__axis-index-copy {
    grid-column: 1;
}

section#td-color-hub .td-hub-entity-explorer__axis-index-head[data-axis-index-head="compact"] .td-hub-entity-explorer__axis-index-meter {
    grid-column: 2;
    grid-row: 1 / span 2;
    justify-content: flex-end;
    margin-top: 0;
}

section#td-color-hub .td-hub-entity-explorer__axis-index-section-head {
    grid-template-columns: minmax(0, 1fr);
    gap: 0.06rem;
}

section#td-color-hub .td-hub-entity-explorer__axis-grid {
    gap: 0.62rem;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--td-hub-navigator-card-min)), 1fr));
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy {
    align-items: start;
    min-height: 0;
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy .td-hub-entity-explorer__axis-card-copy {
    gap: 0.34rem;
}

section#td-color-hub .td-hub-entity-explorer__axis-card-children {
    display: flex;
    flex-wrap: wrap;
    gap: 0.32rem;
    min-width: 0;
}

section#td-color-hub .td-hub-entity-explorer__axis-card-children-label {
    flex: 1 0 100%;
    color: #7a8592;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1.1;
    text-transform: uppercase;
}

section#td-color-hub .td-hub-entity-explorer__axis-card-child-link,
section#td-color-hub .td-hub-entity-explorer__axis-card-child-more {
    display: inline-flex;
    align-items: center;
    min-height: 1.8rem;
    max-width: 100%;
    padding: 0.28rem 0.52rem;
    border: 1px solid rgba(29, 39, 51, 0.075);
    border-radius: 999px;
    background: rgba(29, 39, 51, 0.035);
    color: #1d2733;
    font-size: 0.72rem;
    font-weight: 800;
    line-height: 1.15;
    text-decoration: none;
}

section#td-color-hub .td-hub-entity-explorer__axis-card-children--primary .td-hub-entity-explorer__axis-card-child-link {
    background: var(--td-hub-navigator-accent-soft);
    border-color: color-mix(in srgb, var(--td-hub-navigator-accent) 26%, transparent);
}

section#td-color-hub .td-hub-entity-explorer__axis-card-child-link:hover,
section#td-color-hub .td-hub-entity-explorer__axis-card-child-link:focus-visible {
    border-color: rgba(29, 39, 51, 0.24);
    background: #ffffff;
    text-decoration: underline;
}

section#td-color-hub .td-hub-entity-explorer__axis-card-child-more {
    color: #6b7682;
}

/* City axis: make works-in-place previews read as a guided public product surface. */
section#td-color-hub[data-axis="city"] .td-hub-entity-explorer__axis-card--city {
    align-items: flex-start;
    border-color: color-mix(in srgb, var(--td-hub-navigator-accent) 18%, rgba(29, 39, 51, 0.06));
    background: linear-gradient(135deg, rgba(255, 255, 255, 0.98), var(--td-hub-navigator-accent-soft));
}

section#td-color-hub[data-axis="city"] .td-hub-entity-explorer__axis-card--city .td-hub-entity-explorer__axis-card-icon {
    background: var(--td-hub-navigator-accent-soft);
    color: var(--td-hub-navigator-accent);
}

section#td-color-hub .td-hub-entity-explorer__axis-card-kicker {
    width: fit-content;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--td-hub-navigator-accent);
    font-size: 0.72rem;
    font-weight: 880;
    letter-spacing: 0.03em;
    text-transform: uppercase;
}

section#td-color-hub .td-hub-entity-explorer__city-work-preview {
    display: grid;
    gap: 0.28rem;
    min-width: 0;
    margin-top: 0.08rem;
    padding: 0.48rem;
    border: 1px solid color-mix(in srgb, var(--td-hub-navigator-accent) 20%, transparent);
    border-radius: 0.9rem;
    background: rgba(255, 255, 255, 0.66);
}

section#td-color-hub .td-hub-entity-explorer__city-work-preview-label {
    color: #7a8592;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.055em;
    line-height: 1.1;
    text-transform: uppercase;
}

section#td-color-hub .td-hub-entity-explorer__city-work-preview-item {
    display: block;
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: #1d2733;
    font-size: 0.74rem;
    font-weight: 780;
    line-height: 1.25;
}

section#td-color-hub .td-hub-entity-explorer__city-work-preview-item + .td-hub-entity-explorer__city-work-preview-item {
    padding-top: 0.28rem;
    border-top: 1px solid rgba(29, 39, 51, 0.06);
}

/* Second-level navigator scaffold: safe now, activated as soon as route/view chips are rendered. */
section#td-color-hub .td-hub-axis-secondary,
section#td-color-hub .td-hub-entity-explorer__axis-secondary,
section#td-color-hub .td-hub-entity-explorer__view-strip {
    display: flex;
    flex-wrap: wrap;
    gap: 0.42rem;
    align-items: center;
    min-width: 0;
    padding: 0.44rem;
    border: 1px solid rgba(29, 39, 51, 0.07);
    border-radius: 999px;
    background: rgba(255, 255, 255, 0.68);
}

section#td-color-hub .td-hub-entity-explorer__view-strip-label {
    padding-inline: 0.3rem;
    color: #7a8592;
    font-size: 0.68rem;
    font-weight: 850;
    letter-spacing: 0.06em;
    text-transform: uppercase;
}

section#td-color-hub .td-hub-axis-secondary__item,
section#td-color-hub .td-hub-entity-explorer__view-strip a,
section#td-color-hub .td-hub-entity-explorer__view-strip button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 2rem;
    padding: 0.38rem 0.68rem;
    border: 1px solid rgba(29, 39, 51, 0.08);
    border-radius: 999px;
    background: #ffffff;
    color: #1d2733;
    font-size: 0.76rem;
    font-weight: 850;
    line-height: 1.1;
    text-decoration: none;
}

section#td-color-hub .td-hub-entity-explorer__view-strip-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 1.35rem;
    min-height: 1.35rem;
    margin-inline-start: 0.32rem;
    padding-inline: 0.32rem;
    border-radius: 999px;
    background: rgba(29, 39, 51, 0.06);
    color: #5f6a75;
    font-size: 0.68rem;
    font-weight: 900;
    line-height: 1;
}

section#td-color-hub .td-hub-axis-secondary__item.is-active,
section#td-color-hub .td-hub-entity-explorer__view-strip a[aria-current="page"],
section#td-color-hub .td-hub-entity-explorer__view-strip button[aria-pressed="true"] {
    border-color: rgba(29, 39, 51, 0.76);
    background: #1d2733;
    color: #ffffff;
}

section#td-color-hub .td-hub-entity-explorer__view-strip a[aria-current="page"] .td-hub-entity-explorer__view-strip-count,
section#td-color-hub .td-hub-entity-explorer__view-strip button[aria-pressed="true"] .td-hub-entity-explorer__view-strip-count {
    background: rgba(255, 255, 255, 0.18);
    color: #ffffff;
}

/* Graph-forward cluster cards: use hierarchy and count attributes to create editorial weight. */
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="0"] {
    display: none;
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="1"],
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="2"] {
    --td-hub-navigator-card-min: 14rem;
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="8"],
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="9"],
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="10"],
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="11"],
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="12"] {
    box-shadow: 0 18px 34px -29px rgba(29, 39, 51, 0.74);
}

section#td-color-hub .td-hub-entity-explorer__axis-card-title-link {
    width: fit-content;
    max-width: 100%;
    color: #1d2733;
    text-decoration: none;
}

section#td-color-hub .td-hub-entity-explorer__axis-card-title-link:hover,
section#td-color-hub .td-hub-entity-explorer__axis-card-title-link:focus-visible {
    text-decoration: underline;
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy .td-hub-entity-explorer__axis-card-description {
    -webkit-line-clamp: 1;
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy .td-hub-entity-explorer__axis-card-copy small {
    row-gap: 0.18rem;
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy .td-hub-entity-explorer__axis-card-copy small span {
    display: inline-flex;
    align-items: center;
    min-height: 1.45rem;
    padding: 0.16rem 0.42rem;
    border-radius: 999px;
    background: rgba(29, 39, 51, 0.035);
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="6"] .td-hub-entity-explorer__axis-card-children--secondary,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="7"] .td-hub-entity-explorer__axis-card-children--secondary,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="8"] .td-hub-entity-explorer__axis-card-children--secondary,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="9"] .td-hub-entity-explorer__axis-card-children--secondary,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="10"] .td-hub-entity-explorer__axis-card-children--secondary,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="11"] .td-hub-entity-explorer__axis-card-children--secondary,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="12"] .td-hub-entity-explorer__axis-card-children--secondary {
    max-height: 4.6rem;
    overflow: auto;
    padding-right: 0.12rem;
    scrollbar-width: thin;
}

section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="6"] .td-hub-entity-explorer__axis-card-children--secondary::after,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="7"] .td-hub-entity-explorer__axis-card-children--secondary::after,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="8"] .td-hub-entity-explorer__axis-card-children--secondary::after,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="9"] .td-hub-entity-explorer__axis-card-children--secondary::after,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="10"] .td-hub-entity-explorer__axis-card-children--secondary::after,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="11"] .td-hub-entity-explorer__axis-card-children--secondary::after,
section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="12"] .td-hub-entity-explorer__axis-card-children--secondary::after {
    content: "";
    flex: 1 0 100%;
    height: 0.35rem;
}

/* Landing compaction: the index should read as a tool, not a report. */
section#td-color-hub .td-hub-entity-explorer--axis-landing {
    gap: var(--td-hub-navigator-shell-gap);
}

section#td-color-hub .td-hub-entity-explorer--axis-landing .td-hub-entity-explorer__header {
    gap: 0.54rem;
}

section#td-color-hub .td-hub-entity-explorer--axis-landing .td-hub-entity-explorer__copy {
    gap: 0.24rem;
}

section#td-color-hub .td-hub-entity-explorer--axis-landing .td-hub-entity-explorer__title {
    font-size: clamp(1.08rem, 2.3vw, 1.44rem);
}

section#td-color-hub .td-hub-entity-explorer--axis-landing .td-hub-entity-explorer__description {
    font-size: 0.88rem;
    line-height: 1.42;
}

section#td-color-hub .td-hub-entity-explorer--axis-landing .td-hub-entity-explorer__stats {
    gap: 0.38rem;
}

section#td-color-hub .td-hub-entity-explorer--axis-landing .td-hub-entity-explorer__stat {
    padding: 0.36rem 0.58rem;
    font-size: 0.76rem;
}

section#td-color-hub .td-hub-entity-explorer__axis-index-section + .td-hub-entity-explorer__axis-index-section {
    margin-top: 0.18rem;
}

/* Cross-axis relation surfaces share the same compact visual grammar. */
section#td-color-hub .td-hub-entity-explorer__relations,
section#td-color-hub .td-hub-entity-explorer__next-axes {
    gap: 0.62rem;
}

section#td-color-hub .td-hub-entity-explorer__relation-group,
section#td-color-hub .td-hub-entity-explorer__next-axes {
    border-left: 0.24rem solid var(--td-hub-navigator-accent);
}

section#td-color-hub .td-hub-entity-explorer__chips {
    scrollbar-width: none;
}

section#td-color-hub .td-hub-entity-explorer__chips::-webkit-scrollbar {
    display: none;
    width: 0;
    height: 0;
}

section#td-color-hub .td-hub-entity-explorer__chip {
    min-height: 2.05rem;
    padding-block: 0.38rem;
}

@media (min-width: 1040px) {
    section#td-color-hub .td-hub-entity-explorer__axis-grid {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="8"],
    section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="9"],
    section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="10"],
    section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="11"],
    section#td-color-hub .td-hub-entity-explorer__axis-card--hierarchy[data-hierarchy-children="12"] {
        grid-row: span 2;
    }
}

@media (max-width: 760px) {
    section#td-color-hub .td-hub-entity-explorer__axis-index-head[data-axis-index-head="compact"] {
        grid-template-columns: 1fr;
    }

    section#td-color-hub .td-hub-entity-explorer__axis-index-head[data-axis-index-head="compact"] .td-hub-entity-explorer__axis-index-meter {
        grid-column: auto;
        grid-row: auto;
        justify-content: flex-start;
    }

    section#td-color-hub .td-hub-entity-explorer__trail {
        width: 100%;
        overflow-x: auto;
        flex-wrap: nowrap;
        border-radius: 1rem;
        scrollbar-width: none;
    }

    section#td-color-hub .td-hub-entity-explorer__trail::-webkit-scrollbar {
        display: none;
    }

    section#td-color-hub .td-hub-entity-explorer__trail--entity-detail .td-hub-entity-explorer__trail-current {
        max-width: 54vw;
    }

    section#td-color-hub .td-hub-axis-secondary,
    section#td-color-hub .td-hub-entity-explorer__axis-secondary,
    section#td-color-hub .td-hub-entity-explorer__view-strip {
        border-radius: 1rem;
        overflow-x: auto;
        flex-wrap: nowrap;
        scrollbar-width: none;
    }

    section#td-color-hub .td-hub-axis-secondary::-webkit-scrollbar,
    section#td-color-hub .td-hub-entity-explorer__axis-secondary::-webkit-scrollbar,
    section#td-color-hub .td-hub-entity-explorer__view-strip::-webkit-scrollbar {
        display: none;
    }

    section#td-color-hub .td-hub-entity-explorer__city-work-preview {
        padding: 0.4rem;
    }
}