/* market/market.css — I-03 Market Regime Dashboard */

.mr-page {
  max-width: 1100px;
  margin: 0 auto;
  padding: 24px 16px 48px;
  font-family: var(--font-mono, 'JetBrains Mono', monospace);
}

/* ── Header ────────────────────────────────────────────────────────────────── */
.mr-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  margin-bottom: 20px;
}
.mr-header__title {
  font-size: 22px;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: var(--color-text, #f0f0f0);
  margin: 0 0 4px;
}
.mr-header__sub {
  font-size: 11px;
  color: var(--color-muted, #888);
  letter-spacing: 0.04em;
}
.mr-header__link {
  font-size: 12px;
  color: var(--color-brand, #D5477F);
  text-decoration: none;
}
.mr-header__link:hover { text-decoration: underline; }

/* ── Cards ─────────────────────────────────────────────────────────────────── */
.mr-card {
  background: var(--color-surface, #111);
  border: 1px solid var(--color-border, #222);
  border-radius: var(--radius-card, 12px);
  padding: 20px;
  margin-bottom: 16px;
}
.mr-card__title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--color-muted, #888);
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── Two-column layout ──────────────────────────────────────────────────────── */
.mr-two-col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-bottom: 16px;
}
@media (max-width: 720px) { .mr-two-col { grid-template-columns: 1fr; } }

/* ── Regime hero ────────────────────────────────────────────────────────────── */
.mr-regime { margin-bottom: 16px; }

.mr-regime__hero {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-bottom: 16px;
}
.mr-regime__badge {
  font-size: 20px;
  font-weight: 800;
  padding: 8px 20px;
  border-radius: var(--radius-pill, 999px);
  border: 2px solid;
  letter-spacing: 0.04em;
}
.mr-regime__badge--risk-on  { border-color: #10b981; color: #10b981; background: rgba(16,185,129,0.08); }
.mr-regime__badge--risk-off { border-color: #ef4444; color: #ef4444; background: rgba(239,68,68,0.08); }
.mr-regime__badge--mixed    { border-color: #f59e0b; color: #f59e0b; background: rgba(245,158,11,0.08); }

.mr-regime__spread-label { font-size: 11px; color: var(--color-muted, #888); }

.mr-regime__bars { display: flex; flex-direction: column; gap: 8px; margin-bottom: 12px; }
.mr-regime__bar-row { display: flex; align-items: center; gap: 10px; }
.mr-regime__bar-label { width: 72px; font-size: 11px; color: var(--color-muted, #888); }
.mr-regime__bar-track {
  flex: 1;
  height: 6px;
  background: var(--color-border, #222);
  border-radius: 3px;
  overflow: hidden;
}
.mr-regime__bar-fill { height: 100%; border-radius: 3px; transition: width 0.4s; }
.mr-regime__bar-fill--growth    { background: #10b981; }
.mr-regime__bar-fill--defensive { background: #a78bfa; }
.mr-regime__bar-val { width: 54px; text-align: right; font-size: 13px; font-weight: 700; }

.mr-regime__meta {
  font-size: 11px;
  color: var(--color-muted, #888);
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}
.mr-regime__meta strong { color: var(--color-text, #f0f0f0); }

.mr-regime__pills { display: flex; gap: 8px; flex-wrap: wrap; }
.mr-regime__pill {
  padding: 4px 14px;
  border-radius: var(--radius-pill, 999px);
  border: 1px solid var(--color-border, #333);
  font-size: 11px;
  color: var(--color-muted, #888);
  opacity: 0.5;
}
.mr-regime__pill--active { opacity: 1; }
.mr-regime__pill--active.mr-regime__pill--risk-on  { border-color: #10b981; color: #10b981; }
.mr-regime__pill--active.mr-regime__pill--risk-off { border-color: #ef4444; color: #ef4444; }
.mr-regime__pill--active.mr-regime__pill--mixed    { border-color: #f59e0b; color: #f59e0b; }

/* ── Sector rows ────────────────────────────────────────────────────────────── */
.mr-sectors { display: flex; flex-direction: column; gap: 6px; }
.mr-sector-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
}
.mr-sector-row__icon { font-size: 14px; width: 20px; text-align: center; }
.mr-sector-row__etf  { width: 36px; font-weight: 700; color: var(--color-text, #f0f0f0); }
.mr-sector-row__name { width: 140px; color: var(--color-muted, #888); font-size: 11px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mr-sector-row__bar-track {
  flex: 1;
  height: 4px;
  background: var(--color-border, #222);
  border-radius: 2px;
  overflow: hidden;
}
.mr-sector-row__bar { height: 100%; border-radius: 2px; transition: width 0.4s; }
.mr-sector-row__val { width: 52px; text-align: right; font-weight: 700; }

.mr-sectors__legend { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* ── Macro table ────────────────────────────────────────────────────────────── */
.mr-macro { display: flex; flex-direction: column; gap: 10px; }
.mr-macro-row { display: flex; align-items: center; justify-content: space-between; font-size: 13px; }
.mr-macro-row__label { color: var(--color-muted, #888); font-size: 12px; }
.mr-macro-row__val   { font-weight: 600; display: flex; align-items: center; gap: 6px; }
.mr-macro-row__footer { font-size: 10px; color: var(--color-muted, #888); margin-top: 4px; }

/* ── AI card ────────────────────────────────────────────────────────────────── */
.mr-ai-model { font-size: 10px; color: var(--color-muted, #888); font-weight: 400; }

.mr-ai-loading {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--color-muted, #888);
  padding: 8px 0;
}
.mr-ai-loading__dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--color-brand, #D5477F);
  animation: mr-pulse 1.2s ease-in-out infinite;
}
.mr-ai-loading__dot:nth-child(2) { animation-delay: 0.2s; }
.mr-ai-loading__dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes mr-pulse { 0%,80%,100%{opacity:0.2} 40%{opacity:1} }

.mr-ai-strip {
  font-size: 13px;
  font-weight: 700;
  color: var(--color-text, #f0f0f0);
  margin-bottom: 10px;
  letter-spacing: 0.02em;
}
.mr-ai-narrative { font-size: 13px; line-height: 1.7; color: #ccc; margin: 0 0 10px; }
.mr-ai-watch     { font-size: 12px; line-height: 1.6; color: #aaa; margin: 0; }
.mr-ai-error     { font-size: 12px; color: var(--color-muted, #888); }

/* ── Correlation matrix ─────────────────────────────────────────────────────── */
.mr-matrix-wrap { overflow-x: auto; }
.mr-matrix {
  width: 100%;
  border-collapse: collapse;
  font-size: 11px;
}
.mr-matrix th {
  padding: 6px 8px;
  color: var(--color-muted, #888);
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
}
.mr-matrix td {
  padding: 5px 8px;
  text-align: center;
  border-radius: 4px;
  font-weight: 600;
  white-space: nowrap;
}
.mr-matrix__legend {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
  margin-top: 12px;
}

/* ── Badges + colors ────────────────────────────────────────────────────────── */
.mr-badge {
  display: inline-flex;
  padding: 2px 8px;
  border-radius: var(--radius-pill, 999px);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
}
.mr-badge--warn     { background: rgba(245,158,11,0.15); color: #f59e0b; }
.mr-badge--ok       { background: rgba(16,185,129,0.12); color: #10b981; }
.mr-badge--growth   { background: rgba(16,185,129,0.10); color: #10b981; }
.mr-badge--defensive{ background: rgba(167,139,250,0.12); color: #a78bfa; }

.clr-green { color: #10b981; }
.clr-red   { color: #ef4444; }