/* V1-6 calculator hubs: scalable directory/list grammar. Scoped to .mc-hub. */
.mc-hub { background: var(--mc-canvas); color: var(--mc-text-primary); }
.mc-hub__inner { width: min(calc(100% - 64px), var(--mc-width-page)); margin-inline: auto; padding-bottom: var(--mc-space-20); }
.mc-hub-hero { max-width: 920px; padding-block: var(--mc-space-20) var(--mc-space-8); }
.mc-hub-eyebrow {
    margin: 0 0 var(--mc-space-3); color: var(--mc-brand); font-size: var(--mc-type-help-size);
    line-height: var(--mc-type-help-line); font-weight: 700; letter-spacing: .08em; text-transform: uppercase;
}
.mc-hub-title {
    max-width: 18ch; margin: 0; color: var(--mc-text-primary);
    font-size: clamp(2rem, 4.4vw, var(--mc-type-display-size)); line-height: var(--mc-type-display-line);
    font-weight: var(--mc-type-display-weight); letter-spacing: var(--mc-type-display-tracking);
}
.mc-hub-lede { max-width: 820px; margin: var(--mc-space-5) 0 0; color: var(--mc-text-secondary); font-size: 16px; line-height: 1.7; }
.mc-hub-breadcrumb { display: flex; flex-wrap: wrap; gap: var(--mc-space-2); margin-bottom: var(--mc-space-5); color: var(--mc-text-muted); font-size: 13px; }
.mc-hub-breadcrumb a { color: var(--mc-interactive); text-decoration: none; }
.mc-hub-breadcrumb a:hover { text-decoration: underline; text-underline-offset: 3px; }

.mc-hub-search { max-width: none; margin: 0 0 var(--mc-space-3); z-index: 5; }
.mc-hub-search > label { margin-bottom: var(--mc-space-3); font-size: var(--mc-type-label-size); font-weight: var(--mc-type-label-weight); }
.mc-hub-search__control { min-height: 60px; padding-right: var(--mc-space-2); border-color: var(--mc-border-strong); border-radius: var(--mc-radius-lg); box-shadow: var(--mc-shadow-subtle); }
.mc-hub-search__control input { min-height: 54px; font-size: 16px; }
.mc-hub-search__submit {
    min-width: 68px; min-height: 44px; padding-inline: var(--mc-space-4); border: 0; border-radius: var(--mc-radius-sm);
    background: var(--mc-interactive); color: var(--mc-surface); font: inherit; font-size: 14px; font-weight: 680;
}
:root[data-theme="dark"] .mc-hub-search__submit { color: var(--mc-canvas); }
.mc-hub-search__submit:hover { background: var(--mc-interactive-hover); }
.mc-hub-search .mc-shell-search__results { position: absolute; top: calc(100% + var(--mc-space-2)); left: 0; right: 0; z-index: 20; max-height: min(440px, 56vh); box-shadow: var(--mc-shadow-overlay); }
[data-hub-filter-root] .mc-hub-search .mc-shell-search__results {
    position: static; margin-top: var(--mc-space-2); max-height: min(440px, 56vh);
}

.mc-hub-ad { margin-block: var(--mc-space-2) var(--mc-space-12); padding: var(--mc-space-3); overflow: clip; border: var(--mc-border-width) solid var(--mc-border); background: var(--mc-ad-zone); }
.mc-hub-ad .calc-ad-wrap { min-width: 0; margin: 0; }
.mc-hub-section { padding-top: var(--mc-space-16); scroll-margin-top: var(--mc-header-scroll-offset); }
.mc-hub-section + .mc-hub-section { margin-top: var(--mc-space-4); }
.mc-hub-section__head { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--mc-space-6); margin-bottom: var(--mc-space-5); }
.mc-hub-section__title { margin: 0; font-size: var(--mc-type-section-title-size); line-height: var(--mc-type-section-title-line); font-weight: var(--mc-type-section-title-weight); letter-spacing: var(--mc-type-section-title-tracking); }
.mc-hub-section__description { max-width: 720px; margin: var(--mc-space-2) 0 0; color: var(--mc-text-muted); font-size: 14px; line-height: 22px; }
.mc-hub-count { flex: 0 0 auto; color: var(--mc-brand); font-size: 14px; font-weight: 700; font-variant-numeric: tabular-nums; }

.mc-hub-overview__grid {
    display: grid; grid-template-columns: repeat(3, minmax(0, 1fr));
    border-top: var(--mc-divider-width) solid var(--mc-text-primary);
}
.mc-hub-overview__grid a {
    display: flex; min-height: 144px; flex-direction: column; justify-content: flex-end;
    padding: var(--mc-space-5); border-bottom: var(--mc-border-width) solid var(--mc-border);
    color: var(--mc-text-primary); text-decoration: none;
}
.mc-hub-overview__grid a:not(:nth-child(3n + 1)) { border-left: var(--mc-border-width) solid var(--mc-border); }
.mc-hub-overview__grid a:hover, .mc-hub-overview__grid a:focus-visible { background: var(--mc-surface-subtle); }
.mc-hub-overview__grid .mc-hub-count { margin-bottom: auto; }
.mc-hub-overview__grid strong { font-size: 18px; line-height: 26px; }
.mc-hub-overview__grid a > span:last-child { margin-top: var(--mc-space-1); color: var(--mc-text-muted); font-size: 13px; line-height: 20px; }

.mc-hub-filter { display: flex; flex-wrap: wrap; gap: var(--mc-space-2); margin: var(--mc-space-3) 0 var(--mc-space-5); }
.mc-hub-filter button {
    min-height: 44px; padding: var(--mc-space-2) var(--mc-space-4); border: var(--mc-border-width) solid var(--mc-border-strong);
    border-radius: var(--mc-radius-sm); background: transparent; color: var(--mc-text-secondary); font: inherit; font-size: 14px; font-weight: 620;
}
.mc-hub-filter button[aria-pressed="true"] { border-color: var(--mc-interactive); background: var(--mc-surface-strong); color: var(--mc-interactive); }

.mc-hub-category-directory {
    display: block; counter-reset: hub-directory; border-top: var(--mc-divider-width) solid var(--mc-text-primary);
}
.mc-hub-category {
    min-width: 0; padding: 0; border: 0;
}
.mc-hub-category:nth-child(even) { border-left: 0; }
.mc-hub-category__head, .mc-hub-category__description { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }
.mc-hub-category__head h3 { margin: 0; }
.mc-hub-category__head a { color: var(--mc-text-primary); font-size: 18px; line-height: 26px; font-weight: 700; text-decoration: none; }
.mc-hub-category__head a:hover { color: var(--mc-interactive); text-decoration: underline; text-underline-offset: 3px; }
.mc-hub-category__description { min-height: 44px; margin: var(--mc-space-2) 0 var(--mc-space-3); color: var(--mc-text-muted); font-size: 13px; line-height: 20px; }

.mc-hub-group-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 320px), 1fr)); gap: var(--mc-space-10) var(--mc-space-12); margin-top: var(--mc-space-5); }
.mc-hub-group { min-width: 0; border-top: var(--mc-divider-width) solid var(--mc-text-primary); }
.mc-hub-group__title { margin: 0; padding-block: var(--mc-space-4) var(--mc-space-2); font-size: 17px; line-height: 24px; font-weight: 680; }
.mc-hub-group__description { min-height: 40px; margin: 0 0 var(--mc-space-2); color: var(--mc-text-muted); font-size: 13px; line-height: 20px; }
.mc-hub-list { display: flex; flex-direction: column; border-top: 0; }
.mc-hub-list a {
    display: grid; grid-template-columns: 36px minmax(0, 1fr) auto; min-width: 0; min-height: 60px;
    align-items: center; gap: var(--mc-space-4); padding: var(--mc-space-2) var(--mc-space-1);
    border-bottom: var(--mc-border-width) solid var(--mc-border); color: var(--mc-text-secondary);
    font-size: 14px; line-height: 22px; text-decoration: none; counter-increment: hub-directory;
}
.mc-hub-list a::before { content: counter(hub-directory, decimal-leading-zero); color: var(--mc-brand); font-size: 13px; font-variant-numeric: tabular-nums; }
.mc-hub-list a::after { content: attr(data-category-label) "  →"; color: var(--mc-text-muted); font-size: 13px; }
.mc-hub-list a strong { min-width: 0; color: var(--mc-text-primary); font-weight: 650; }
.mc-hub-list a:hover, .mc-hub-list a:focus-visible { color: var(--mc-interactive); background: var(--mc-surface-subtle); text-decoration: underline; text-underline-offset: 3px; }
.mc-hub-list--inventory { border-top: var(--mc-divider-width) solid var(--mc-text-primary); }
.mc-hub-list--inventory a { min-height: 56px; padding-inline: var(--mc-space-2); color: var(--mc-text-primary); font-size: 15px; font-weight: 620; }
.mc-hub-empty { margin: var(--mc-space-5) 0 0; color: var(--mc-text-muted); font-size: 14px; }

.mc-hub-panel { padding-block: var(--mc-space-6); border-top: var(--mc-divider-width) solid var(--mc-text-primary); border-bottom: var(--mc-border-width) solid var(--mc-border); }
.mc-hub-panel h2 { margin: 0; font-size: 18px; line-height: 26px; font-weight: 680; }
.mc-hub-note { max-width: 820px; margin: var(--mc-space-3) 0 0; color: var(--mc-text-secondary); font-size: 14px; line-height: 24px; }
.mc-hub-related { display: flex; flex-wrap: wrap; gap: var(--mc-space-2) var(--mc-space-6); margin-top: var(--mc-space-3); }
.mc-hub-related a { display: inline-flex; min-height: 44px; align-items: center; color: var(--mc-interactive); font-size: 14px; font-weight: 620; text-decoration: none; }
.mc-hub-related a:hover { text-decoration: underline; text-underline-offset: 3px; }
.mc-hub-disclaimer { margin-top: var(--mc-space-8); color: var(--mc-text-muted); font-size: 13px; line-height: 21px; }

@media (max-width: 1024px) {
    .mc-hub__inner { width: min(calc(100% - 32px), var(--mc-width-page)); }
}
@media (max-width: 700px) {
    .mc-hub-hero { padding-block: var(--mc-space-10) var(--mc-space-6); }
    .mc-hub-section { padding-top: var(--mc-space-10); }
    .mc-hub-section__head { align-items: flex-start; flex-direction: column; gap: var(--mc-space-2); }
    .mc-hub-category-directory, .mc-hub-group-grid, .mc-hub-overview__grid { grid-template-columns: 1fr; }
    .mc-hub-overview__grid a { min-height: 104px; padding-inline: 2px; border-left: 0 !important; }
    .mc-hub-category { padding-inline: 0; border-left: 0 !important; }
    .mc-hub-category__description, .mc-hub-group__description { min-height: 0; }
    .mc-hub-list a { grid-template-columns: 30px minmax(0, 1fr) 20px; }
    .mc-hub-list a::after { content: "→"; }
}
@media (max-width: 480px) {
    .mc-hub__inner { width: calc(100% - 20px); padding-bottom: var(--mc-space-12); }
    .mc-hub-search__control { gap: var(--mc-space-2); padding-left: var(--mc-space-3); }
    .mc-hub-search__control svg { display: none; }
    .mc-hub-search__submit { min-width: 58px; padding-inline: var(--mc-space-3); }
    .mc-hub-ad { margin-bottom: var(--mc-space-8); padding: var(--mc-space-2); }
}