/* Market Outlook v2 components (spec section 30) -- typography/arrow
   driven, no red/green (spec section 34's explicit restraint,
   confirmed decision over an earlier red/green request this session).
   Every class name below is used by market_components.js -- kept in
   sync deliberately, checked by grep before shipping. */

/* 1. KPI + Delta */
.kpi-delta { display: flex; flex-direction: column; gap: 2px; }
.kpi-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-4); }
.kpi-value { font-family: var(--display); font-size: 28px; font-weight: 300; color: var(--text-1); }
.kpi-delta-row { font-family: var(--mono); font-size: 13px; color: var(--text-3); }

/* 2. Sparkline */
.sparkline { color: var(--text-3); display: block; }
.sparkline-link { display: inline-block; text-decoration: none; }
.sparkline-link:hover .sparkline { color: var(--gold); }
.sparkline-empty { background: var(--surface-2); border-radius: var(--r); }

/* 3. Corridor -- three distinct visual treatments, one shared track style */
.corridor { display: flex; flex-direction: column; }
.corridor-range, .corridor-target, .corridor-threshold { display: flex; flex-direction: column; }
.corridor-empty { font-family: var(--mono); font-size: 13px; color: var(--text-4); padding: 8px 0; }
.corridor-track { position: relative; height: 6px; border-radius: 3px; background: var(--surface-2); margin: 10px 0 6px; }
.corridor-marker { position: absolute; top: -3px; width: 2px; height: 12px; background: var(--text-1); transform: translateX(-1px); }
.corridor-midline { position: absolute; left: 50%; top: 0; bottom: 0; width: 1px; background: var(--border-2); }
.corridor-normal-band { position: absolute; left: 30%; right: 30%; top: 0; bottom: 0; background: var(--surface-3); border-radius: 3px; }
.corridor-target-band { position: absolute; left: 42%; right: 42%; top: 0; bottom: 0; background: var(--surface-3); border-radius: 3px; }
.corridor-labels { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 12px; color: var(--text-4); }

/* 4. Breadth bar -- segments differ by OPACITY/pattern, not hue */
.breadth-bar { display: flex; flex-direction: column; }
.breadth-bar-empty { font-family: var(--mono); font-size: 13px; color: var(--text-4); padding: 8px 0; }
.breadth-bar-track { display: flex; height: 8px; border-radius: 4px; overflow: hidden; background: var(--surface-2); margin-bottom: 8px; }
.breadth-seg { height: 100%; }
.breadth-seg-positive { background: var(--green-acc); }
.breadth-seg-neutral { background: var(--text-4); }
.breadth-seg-negative { background: var(--red-acc); }
.breadth-labels { display: flex; gap: 16px; font-family: var(--mono); font-size: 12px; color: var(--text-3); }

/* 5. Divergence -- ordinal position plot, weaker (left) to stronger (right) */
.divergence-visual { display: flex; flex-direction: column; gap: 10px; }
.divergence-row { display: flex; align-items: center; gap: 12px; }
.divergence-row-label { font-family: var(--mono); font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-4); width: 64px; flex-shrink: 0; }
.divergence-track { position: relative; flex: 1; height: 4px; border-radius: 2px; background: var(--surface-2); }
.divergence-marker { position: absolute; top: -4px; width: 10px; height: 10px; border-radius: 50%; background: var(--text-1); transform: translateX(-5px); }
.divergence-relationship-label { font-family: var(--display); font-size: 16px; font-weight: 400; color: var(--gold); margin-top: 4px; }

/* 6. Cross-asset matrix row -- compact, not a giant card */
.matrix-row-link { text-decoration: none; color: inherit; display: block; cursor: pointer; }
.matrix-row { display: grid; grid-template-columns: 1.6fr 0.9fr 0.9fr; align-items: center; gap: 12px; padding: 10px 4px; border-bottom: 1px solid var(--border); transition: background .15s; }
.matrix-row-link:hover .matrix-row { background: var(--surface-2); }
.matrix-row-link:last-child .matrix-row { border-bottom: none; }
.matrix-name { font-size: 17px; color: var(--text-1); }
.matrix-name-clickable { cursor: pointer; text-decoration: underline; text-decoration-color: transparent; transition: text-decoration-color .15s, color .15s; }
.matrix-name-clickable:hover { color: var(--gold); text-decoration-color: var(--gold); }
.matrix-ticker { font-family: var(--mono); font-size: 12px; color: var(--text-4); font-weight: 400; text-decoration: none; }
.matrix-ticker::before { content: " ("; }
.matrix-ticker::after { content: ")"; }
.matrix-group-header { font-family: var(--mono); font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--gold); padding: 16px 4px 6px; border-bottom: none; }
.matrix-group-header:first-child { padding-top: 4px; }
.matrix-value { font-family: var(--display); font-size: 20px; font-weight: 200; color: var(--text-1); letter-spacing: -.01em; text-align: right; }
.matrix-delta { font-family: var(--mono); font-size: 13px; color: var(--text-3); text-align: right; }
.matrix-delta-positive { color: #5DF0A0; }
.matrix-delta-negative { color: #FF8A80; }
.matrix-delta-flat { color: var(--text-4); }
.matrix-sparkline { display: flex; justify-content: flex-end; }