/* =============================================================
   ChatMMM Markets page — regime gauge, indices, macro readings.
   Tokens only; no page-specific colours beyond bull/bear/neutral.
   ============================================================= */
@layer components {
    .mkt-section { margin: 0 0 var(--space-4, 16px); }

    .mkt-card {
        background: var(--surface-card);
        border: 1px solid var(--border-subtle, var(--border-color, rgba(15, 23, 42, 0.08)));
        border-radius: var(--radius-lg, 14px);
        box-shadow: var(--elev-1);
        padding: 18px 20px;
    }
    .mkt-card--skeleton {
        min-height: 120px;
        background: linear-gradient(90deg, var(--surface-sunken) 25%, var(--surface-card) 50%, var(--surface-sunken) 75%);
        background-size: 200% 100%;
        animation: dash-shimmer 1.4s ease-in-out infinite;
    }
    .mkt-card__head {
        display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
        margin: 0 0 12px;
    }
    .mkt-card__title {
        margin: 0; font-size: var(--fs-md); font-weight: 700; letter-spacing: var(--tracking-tight);
        display: inline-flex; align-items: center; gap: 8px;
    }
    .mkt-card__title i { color: var(--text-muted); font-size: 0.9em; }
    .mkt-card__meta { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
    .mkt-card__foot { margin: 14px 0 0; font-size: var(--fs-xs); color: var(--text-muted); line-height: var(--lh-normal); }
    .mkt-empty { margin: 0; color: var(--text-muted); font-size: var(--fs-sm); }
    .mkt-foot { margin: 8px 0 0; font-size: var(--fs-xs); color: var(--text-muted); }

    /* Regime */
    .mkt-regime { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
    .mkt-regime__dot { width: 12px; height: 12px; border-radius: 999px; background: var(--text-muted); }
    .mkt-regime__label { font-size: var(--fs-xl); font-weight: 800; letter-spacing: var(--tracking-tight); }
    .mkt-regime__score { font-size: var(--fs-sm); color: var(--text-secondary); }
    .mkt-card--up .mkt-regime__dot        { background: var(--bull); }
    .mkt-card--up .mkt-regime__label      { color: var(--bull); }
    .mkt-card--down .mkt-regime__dot      { background: var(--bear); }
    .mkt-card--down .mkt-regime__label    { color: var(--bear); }
    .mkt-card--neutral .mkt-regime__dot   { background: #f59e0b; }
    .mkt-card--neutral .mkt-regime__label { color: #b45309; }

    .mkt-factors { list-style: none; margin: 0 0 12px; padding: 0; display: grid; gap: 7px; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }
    .mkt-factor { display: flex; align-items: center; gap: 9px; font-size: var(--fs-sm); color: var(--text-secondary); }
    .mkt-factor i { font-size: 14px; flex-shrink: 0; }
    .mkt-factor.is-on i { color: var(--bull); }
    .mkt-factor.is-off, .mkt-factor.is-off i { color: var(--text-muted); }

    .mkt-mom { display: flex; gap: 18px; flex-wrap: wrap; margin: 0 0 6px; }
    .mkt-mom__cell { display: flex; flex-direction: column; gap: 2px; }
    .mkt-mom__k { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
    .mkt-mom__v { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-md); }
    .mkt-note { margin: 8px 0 0; font-size: var(--fs-sm); color: var(--text-secondary); }

    .is-bull { color: var(--bull); }
    .is-bear { color: var(--bear); }

    /* Indices */
    .mkt-indices { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
    .mkt-index {
        border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
        border-radius: var(--radius-md, 10px);
        padding: 12px 14px; background: var(--surface-sunken);
    }
    .mkt-index__name { font-size: var(--fs-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-caps); }
    .mkt-index__price { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-lg); margin-top: 4px; }
    .mkt-index__chg { font-family: var(--font-mono); font-weight: 700; font-size: var(--fs-sm); margin-top: 2px; }
    .mkt-index__trends { display: flex; gap: 12px; margin-top: 8px; font-size: var(--fs-xs); color: var(--text-muted); }
    .mkt-index__trends b { font-weight: 600; margin-right: 4px; }
    .mkt-index__trends i { font-style: normal; font-family: var(--font-mono); font-weight: 600; }

    /* FRED */
    .mkt-freds { display: grid; gap: 12px; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); }
    .mkt-fred {
        border: 1px solid var(--border-subtle, rgba(15, 23, 42, 0.08));
        border-radius: var(--radius-md, 10px);
        padding: 12px 14px; background: var(--surface-sunken);
    }
    .mkt-fred__name { font-size: var(--fs-xs); color: var(--text-muted); }
    .mkt-fred__value { font-family: var(--font-mono); font-weight: 800; font-size: var(--fs-lg); margin-top: 4px; }
    .mkt-fred__chg { display: block; font-family: var(--font-mono); font-weight: 600; font-size: var(--fs-xs); margin-top: 2px; }
    .mkt-fred__when { font-size: var(--fs-xs); color: var(--text-muted); margin-top: 6px; }
}