/* ============================================================
   ROBERT — Macro Dashboard (finance-dashboard.html)
   Scoped styles. Consumes the brand tokens from styles.css
   (--bg, --panel, --line, --teal, --grad, fonts, etc.).
   All classes are md-* to avoid collisions with shared styles.
   ============================================================ */

/* Negative/positive accents. Teal is the brand metric color (up);
   a restrained rose is the only added hue, for down-moves. */
:root{
  --md-up:#0ED9A0;
  --md-down:#EC5F7A;
}

/* ---------- intro freshness chip ---------- */
.md-asof{
  display:inline-flex;align-items:center;gap:.55rem;
  font-family:var(--mono);font-size:.64rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);border:0.5px solid var(--line);border-radius:var(--radius-pill,999px);
  padding:.4rem .85rem;background:rgba(255,255,255,.012);
}
.md-asof .dot{width:7px;height:7px;border-radius:50%;background:var(--teal);
  box-shadow:0 0 10px rgba(14,217,160,.8)}

/* ---------- KPI strip (mirrors the .stat grid language) ---------- */
.md-kpis{
  display:grid;grid-template-columns:repeat(7,minmax(0,1fr));
  border-top:0.5px solid var(--line);border-left:0.5px solid var(--line);
  margin-top:2.5rem;
}
.md-kpi{
  padding:1.5rem 1.25rem;border-right:0.5px solid var(--line);border-bottom:0.5px solid var(--line);
  display:flex;flex-direction:column;gap:.5rem;min-height:130px;min-width:0;
  background:linear-gradient(180deg,rgba(255,255,255,.014),transparent);
}
.md-kpi .k-label{font-family:var(--mono);font-size:.58rem;letter-spacing:.16em;text-transform:uppercase;color:var(--muted);overflow-wrap:break-word}
.md-kpi .k-val{font-family:var(--display);font-weight:800;letter-spacing:-0.02em;font-size:clamp(1.05rem,1.5vw,1.6rem);color:var(--teal);line-height:1;margin-top:auto;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.md-kpi .k-delta{font-family:var(--mono);font-size:.66rem;letter-spacing:.04em;display:inline-flex;align-items:center;gap:.3rem}
.md-kpi .k-delta.up{color:var(--md-up)}
.md-kpi .k-delta.down{color:var(--md-down)}
.md-kpi .k-delta.flat{color:var(--muted-2)}
@media(max-width:1100px){.md-kpis{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media(max-width:720px){.md-kpis{grid-template-columns:repeat(2,minmax(0,1fr))}}

/* ---------- tab control ---------- */
.md-tabs{
  display:flex;gap:.4rem;flex-wrap:wrap;margin:3rem 0 1.6rem;
  border-bottom:0.5px solid var(--line);padding-bottom:0;
}
.md-tab{
  font-family:var(--heading);font-weight:600;font-size:.74rem;letter-spacing:.06em;
  color:var(--muted);background:none;border:none;cursor:pointer;
  padding:.7rem 1rem;position:relative;transition:color var(--transition-base,250ms ease);
}
.md-tab:hover{color:var(--text)}
.md-tab.active{color:var(--text)}
.md-tab.active::after{content:"";position:absolute;left:.6rem;right:.6rem;bottom:-1px;height:2px;background:var(--grad)}
.md-tab .t-ico{color:var(--teal);margin-right:.35rem}

/* ---------- panels ---------- */
.md-panel{display:none}
.md-panel.active{display:block;animation:md-fade .5s cubic-bezier(.22,1,.36,1)}
@keyframes md-fade{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

/* ---------- chart card grid ---------- */
.md-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:1.1rem}
.md-grid.one{grid-template-columns:1fr}
.md-grid.three{grid-template-columns:repeat(3,1fr)}
@media(max-width:860px){.md-grid,.md-grid.three{grid-template-columns:1fr}}

.md-card{
  border:0.5px solid var(--line);border-radius:var(--radius-lg,12px);
  background:var(--panel);padding:1.2rem 1.3rem 1.35rem;
  display:flex;flex-direction:column;
}
.md-card .c-head{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.md-card .c-title{font-family:var(--heading);font-weight:600;font-size:.95rem;color:var(--text)}
.md-card .c-note{font-family:var(--mono);font-size:.58rem;letter-spacing:.1em;color:var(--muted-2);text-transform:uppercase}
.md-card.span2{grid-column:1 / -1}

/* chart canvas wrapper — fixed height so Chart.js can size */
.md-chart{position:relative;width:100%;height:240px}
.md-chart.tall{height:300px}
.md-chart.short{height:200px}

/* ---------- cross-asset table ---------- */
.md-table{width:100%;border-collapse:collapse;font-size:.86rem}
.md-table th,.md-table td{text-align:right;padding:.7rem .8rem;border-bottom:0.5px solid var(--line)}
.md-table th{font-family:var(--mono);font-weight:500;font-size:.6rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.md-table td:first-child,.md-table th:first-child{text-align:left}
.md-table .asset{font-family:var(--heading);font-weight:500;color:var(--text)}
.md-table .num{font-variant-numeric:tabular-nums;color:var(--text)}
.md-table .up{color:var(--md-up)}
.md-table .down{color:var(--md-down)}
.md-table tbody tr{transition:background-color var(--transition-fast,150ms ease)}
.md-table tbody tr:hover{background:rgba(79,70,229,.06)}

/* ---------- AI sentiment panel ---------- */
.md-ai-empty{
  border:0.5px dashed var(--line-2);border-radius:var(--radius-lg,12px);
  padding:2.5rem;text-align:center;color:var(--muted);
  background:linear-gradient(180deg,rgba(124,58,237,.04),transparent);
}
.md-ai-empty .ico{font-size:1.6rem;margin-bottom:.8rem;opacity:.7}
.md-ai-empty h4{font-family:var(--heading);color:var(--text);font-size:1.05rem;margin-bottom:.5rem}
.md-ai-empty p{font-size:.88rem;line-height:1.7;max-width:46ch;margin:0 auto}
.md-scenarios{display:grid;grid-template-columns:repeat(3,1fr);gap:1rem;margin-bottom:1.4rem}
.md-scenario{border:0.5px solid var(--line);border-radius:var(--radius-md,8px);padding:1.1rem;background:var(--panel)}
.md-scenario .s-prob{font-family:var(--display);font-weight:800;color:var(--teal);font-size:1.8rem;line-height:1}
.md-scenario .s-name{font-family:var(--heading);font-weight:600;font-size:.9rem;margin:.5rem 0 .35rem}
.md-scenario .s-desc{color:var(--muted);font-size:.8rem;line-height:1.55}
@media(max-width:860px){.md-scenarios{grid-template-columns:1fr}}
.md-narrative{color:var(--muted);font-size:.95rem;line-height:1.8;max-width:70ch}
.md-narrative p{margin-bottom:1rem}

/* disclaimer */
.md-disclaimer{font-family:var(--mono);font-size:.6rem;letter-spacing:.08em;color:var(--muted-2);margin-top:2.5rem;text-align:center}

/* no-JS / loading states */
.md-loading{color:var(--muted);font-size:.9rem;padding:2rem 0;text-align:center}
.md-error{color:var(--md-down);font-size:.9rem;padding:1.5rem;border:0.5px solid rgba(236,95,122,.3);border-radius:8px;background:rgba(236,95,122,.05)}