/* Market Tracker hub — visual language shared with the Analyze tools
   (equity/MF review): Inter, soft #f7f8fc radial background, white cards
   with #e4e7ec borders + soft shadows, purple/indigo accents. */

:root {
    --hub-ink: #1d253c;
    --hub-muted: #667085;
    --hub-line: #e4e7ec;
    --hub-accent: #7f56d9;
    --hub-accent-deep: #6941c6;
    --hub-tint: #f4f3ff;
    --hub-red: #d92d20;
    --hub-green: #027a48;
    --hub-shadow: 0 8px 24px rgba(16, 24, 40, 0.045);
}

.market-hub {
    background:
        radial-gradient(circle at 8% 0%, rgba(214, 187, 251, 0.22), transparent 24rem),
        radial-gradient(circle at 94% 13%, rgba(186, 230, 253, 0.24), transparent 22rem),
        #f7f8fc;
    color: var(--hub-ink);
    font-family: 'Inter', 'Segoe UI', Arial, sans-serif;
    min-height: 100vh;
    padding: 48px 0 84px;
}
.market-hub__inner { margin: 0 auto; max-width: 1180px; padding: 0 28px; }

.market-hub__eyebrow {
    color: var(--hub-accent);
    font-size: 0.8rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    margin: 0 0 0.35rem;
    text-transform: uppercase;
}

.market-hub h1, .market-hub h2, .market-hub h3 { letter-spacing: -0.035em; }

.market-hub__hero { padding: 20px 0 32px; }
.market-hub__hero h1 {
    font-size: clamp(2.1rem, 4vw, 3.25rem);
    letter-spacing: -0.055em;
    line-height: 1.05;
    margin: 0;
    max-width: 800px;
}
.market-hub__hero > p:not(.market-hub__eyebrow):not(.market-hub__updated) {
    color: #475467;
    font-size: 1.04rem;
    line-height: 1.55;
    margin: 1rem 0 0;
    max-width: 700px;
}
.market-hub__updated { color: #98a2b3; font-size: 0.78rem; margin: 1.25rem 0 0; }

/* Pulse */
.market-pulse { padding: 12px 0 28px; }
.market-pulse__heading, .market-hub__section-heading, .market-movers__heading {
    align-items: end;
    display: flex;
    justify-content: space-between;
}
.market-pulse h2, .market-hub__section-heading h2, .market-movers h2 {
    font-size: clamp(1.45rem, 2vw, 1.85rem);
    margin: 0;
}
.market-pulse__heading > a {
    color: var(--hub-accent-deep);
    font-size: 0.83rem;
    font-weight: 700;
    text-decoration: none;
}
.market-pulse__grid {
    display: grid;
    gap: 12px;
    grid-template-columns: repeat(5, 1fr);
    margin-top: 18px;
}
.market-pulse__metric, .market-pulse__regime {
    background: #fff;
    border: 1px solid var(--hub-line);
    border-radius: 12px;
    box-shadow: var(--hub-shadow);
    min-height: 105px;
    padding: 1rem 1.1rem;
    text-decoration: none;
}
.market-pulse__metric span, .market-pulse__regime span {
    color: var(--hub-muted);
    display: block;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.05em;
    text-transform: uppercase;
}
.market-pulse__metric strong, .market-pulse__regime strong {
    display: block;
    font-size: 1.2rem;
    font-weight: 700;
    margin: 0.45rem 0 0.2rem;
}
.market-pulse__metric small, .market-pulse__regime small { color: var(--hub-muted); font-size: 0.72rem; }
.is-up { color: var(--hub-green) !important; }
.is-down { color: var(--hub-red) !important; }
.market-pulse__regime { background: var(--hub-tint); border-color: #e9d7fe; transition: box-shadow 160ms ease, transform 160ms ease; }
.market-pulse__regime:hover { box-shadow: 0 12px 24px rgba(67, 56, 202, 0.12); transform: translateY(-2px); }
.market-pulse__regime strong { color: var(--hub-accent-deep); }
.market-pulse__regime b { font-size: 1rem; margin-left: 0.3rem; }

/* Dashboards */
.market-hub__section { padding: 42px 0 0; }
.market-hub__section-heading { margin-bottom: 18px; }
.market-hub__section-heading > p {
    color: var(--hub-muted);
    font-size: 0.9rem;
    line-height: 1.4;
    margin: 0;
    max-width: 285px;
    text-align: right;
}
.market-hub__dashboards { display: grid; gap: 16px; grid-template-columns: repeat(3, 1fr); }
.market-dashboard-card {
    background: #fff;
    border: 1px solid var(--hub-line);
    border-radius: 14px;
    box-shadow: var(--hub-shadow);
    color: var(--hub-ink);
    min-height: 210px;
    padding: 1.35rem;
    text-decoration: none;
    transition: transform 160ms ease, box-shadow 160ms ease;
}
.market-dashboard-card:hover { box-shadow: 0 12px 24px rgba(67, 56, 202, 0.12); transform: translateY(-3px); }
.market-dashboard-card > span { color: var(--hub-accent); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.04em; }
.market-dashboard-card h3 { font-size: 1.45rem; margin: 1.8rem 0 0.5rem; }
.market-dashboard-card p { color: var(--hub-muted); font-size: 0.88rem; line-height: 1.45; margin: 0; }
.market-dashboard-card b { color: var(--hub-accent-deep); display: block; font-size: 0.8rem; margin-top: 1.25rem; }
.market-dashboard-card.factor { background: linear-gradient(160deg, #312e81 0%, #4c1d95 100%); border-color: transparent; color: #fff; }
.market-dashboard-card.factor h3 { color: #fff; }
.market-dashboard-card.factor p { color: #ddd6fe; }
.market-dashboard-card.factor b, .market-dashboard-card.factor > span { color: #d6bbfb; }

/* Movers + factor CTA */
.market-hub__split { display: grid; gap: 16px; grid-template-columns: 1.4fr 0.9fr; margin-top: 42px; }
.market-movers, .market-hub__factor-cta {
    border: 1px solid var(--hub-line);
    border-radius: 14px;
    padding: 1.35rem;
}
.market-movers { background: #fff; box-shadow: var(--hub-shadow); }
.market-movers__heading > span { color: #98a2b3; font-size: 0.72rem; }
.market-movers__table { margin-top: 1rem; }
.market-movers__table > div {
    align-items: center;
    border-top: 1px solid #f2f4f7;
    display: grid;
    font-size: 0.84rem;
    grid-template-columns: 1.7fr 1fr 0.7fr;
    padding: 0.75rem 0;
}
.market-movers__table span { color: var(--hub-muted); }
.market-movers__table b { text-align: right; }
.market-movers__table strong a { color: inherit; text-decoration: none; }
.market-movers__table strong a:hover { color: var(--hub-accent-deep); text-decoration: underline; }
.market-hub__factor-cta {
    background: #1d253c;
    border-color: transparent;
    box-shadow: 0 18px 35px rgba(29, 37, 60, 0.16);
    color: #fff;
}
.market-hub__factor-cta .market-hub__eyebrow { color: #d6bbfb; }
.market-hub__factor-cta h2 { color: #fff; font-size: 1.4rem; line-height: 1.1; margin: 0; }
.market-hub__factor-cta > p:not(.market-hub__eyebrow) { color: #d0d5dd; font-size: 0.88rem; line-height: 1.45; }
.market-hub__factor-cta a {
    border-top: 1px solid rgba(255, 255, 255, 0.15);
    color: #fff;
    display: flex;
    font-size: 0.82rem;
    font-weight: 700;
    justify-content: space-between;
    padding: 0.62rem 0;
    text-decoration: none;
}
.market-hub__factor-cta a:hover { color: #d6bbfb; }

/* FAQ */
.market-hub__faq { margin-top: 42px; max-width: 760px; }
.market-hub__faq h2 { font-size: 1.45rem; margin: 0.1rem 0 1rem; }
.market-hub__faq details { border-top: 1px solid var(--hub-line); padding: 0.85rem 0; }
.market-hub__faq summary { color: var(--hub-accent-deep); cursor: pointer; font-size: 0.9rem; font-weight: 700; }
.market-hub__faq summary::after { content: " +"; }
.market-hub__faq details[open] summary::after { content: " −"; }
.market-hub__faq details p { color: var(--hub-muted); font-size: 0.88rem; line-height: 1.5; margin: 0.65rem 0 0; }

.market-hub__more-tools { border-top: 1px solid var(--hub-line); margin-top: 28px; padding-top: 20px; }
.market-hub__more-tools a { color: var(--hub-accent-deep); font-size: 0.87rem; font-weight: 700; margin-right: 24px; text-decoration: none; }

/* Tools pill nav — scoped here so the shared chunk keeps its look elsewhere */
.market-hub .market-tools-nav a { border-color: var(--hub-line); color: #475467; }
.market-hub .market-tools-nav a:hover { background: var(--hub-tint); border-color: var(--hub-accent); color: var(--hub-accent-deep); }
.market-hub .market-tools-nav a:focus-visible { box-shadow: 0 0 0 2px rgba(127, 86, 217, 0.4); }
.market-hub .market-tools-nav a.is-active { background: #1d253c; border-color: #1d253c; color: #fff; }

@media (max-width: 850px) {
    .market-pulse__grid { grid-template-columns: repeat(3, 1fr); }
    .market-hub__dashboards, .market-hub__split { grid-template-columns: 1fr; }
}
@media (max-width: 580px) {
    .market-hub { padding-top: 22px; }
    .market-hub__inner { padding: 0 16px; }
    .market-pulse__heading, .market-hub__section-heading { align-items: start; flex-direction: column; gap: 0.75rem; }
    .market-pulse__grid { grid-template-columns: 1fr 1fr; }
    .market-pulse__regime { grid-column: span 2; }
    .market-hub__section-heading > p { max-width: none; text-align: left; }
}
@media (prefers-reduced-motion: reduce) {
    .market-dashboard-card, .market-pulse__regime { transition: none; }
}