/**
 * TotalDesign Hub — mobile visual refinement.
 * Keeps the Hub palette intact while repairing mobile overflow and the split accent seam.
 */

section#td-color-hub {
    --td-hub-mobile-seam: #d8b9af;
}

section#td-color-hub .td-hub-surface-console,
section#td-color-hub .td-hub-entity-explorer {
    min-width: 0;
    max-width: 100%;
    border-left-color: var(--td-hub-mobile-seam);
}

section#td-color-hub .td-hub-surface-console + .td-hub-entity-explorer {
    border-left-color: var(--td-hub-mobile-seam);
}

@media (max-width: 759px) {
    section#td-color-hub {
        overflow-x: clip;
    }

    section#td-color-hub .td-hub-surface-console {
        gap: 0.78rem;
        padding: 0.9rem 0.78rem 0.82rem;
        border-left-width: 0.24rem;
        border-radius: 1rem 1rem 0 0;
    }

    section#td-color-hub .td-hub-surface-console__header {
        gap: 0.62rem;
    }

    section#td-color-hub .td-hub-surface-console__title {
        font-size: clamp(1.3rem, 7vw, 1.7rem);
    }

    section#td-color-hub .td-hub-surface-console__description {
        font-size: 0.93rem;
        line-height: 1.45;
    }

    section#td-color-hub .td-hub-surface-console__badge {
        min-height: 2.1rem;
        padding: 0.4rem 0.68rem;
        font-size: 0.8rem;
    }

    section#td-color-hub .td-hub-axis-strip,
    section#td-color-hub .td-color-shell__route-strip {
        min-width: 0;
        max-width: 100%;
        overflow: visible;
    }

    section#td-color-hub .td-hub-axis-strip__items {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        overflow: visible;
        padding: 0;
        scroll-snap-type: none;
    }

    section#td-color-hub .td-hub-axis-strip__item {
        width: 100%;
        min-width: 0;
        padding: 0.62rem 0.66rem;
        border-radius: 0.9rem;
    }

    section#td-color-hub .td-hub-axis-strip__label {
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: 0.94rem;
    }

    section#td-color-hub .td-color-hub__chip-row {
        display: grid;
        grid-template-columns: repeat(2, minmax(0, 1fr));
        gap: 0.5rem;
        overflow: visible;
        padding: 0;
    }

    section#td-color-hub .td-color-hub__chip {
        width: 100%;
        min-width: 0;
        min-height: 2.45rem;
        padding: 0.58rem 0.7rem;
        white-space: normal;
        text-align: center;
        line-height: 1.18;
    }

    section#td-color-hub .td-color-hub__chip-row > :last-child:nth-child(odd) {
        grid-column: 1 / -1;
    }

    section#td-color-hub .td-hub-entity-explorer {
        padding: 0.82rem 0.78rem 0.95rem;
        border-left-width: 0.24rem;
        border-radius: 0 0 1rem 1rem;
    }

    section#td-color-hub .td-hub-entity-explorer__trail {
        width: 100%;
        border-radius: 0.8rem;
    }

    section#td-color-hub .td-hub-entity-explorer__axis-index,
    section#td-color-hub .td-hub-entity-explorer__axis-card,
    section#td-color-hub .td-hub-entity-explorer__active-path {
        min-width: 0;
        max-width: 100%;
    }
}

@media (max-width: 420px) {
    section#td-color-hub .td-hub-axis-strip__items,
    section#td-color-hub .td-color-hub__chip-row {
        grid-template-columns: 1fr;
    }

    section#td-color-hub .td-color-hub__chip-row > :last-child:nth-child(odd) {
        grid-column: auto;
    }
}