/* ============================================================
   market.css — styles for the data-driven market reports (/market/)
   Extends style.css; reuses --primary/--text/--border etc.
   ============================================================ */

.mkt-updated{
  font-size:12px;color:var(--text3);margin-top:6px;
}

/* Direct-answer block — the citable lead paragraph */
.mkt-answer{
  background:linear-gradient(135deg, rgba(99,102,241,.06) 0%, rgba(99,102,241,.02) 100%);
  border:1px solid rgba(99,102,241,.2);
  border-left:3px solid var(--primary);
  border-radius:var(--radius);
  padding:16px 20px;
  margin:0 0 20px;
}
.mkt-answer p{
  font-size:15px;color:var(--text);line-height:1.7;margin:0;
}
.mkt-answer strong{color:var(--text);font-weight:700}
.mkt-src{
  display:inline;font-size:12px;color:var(--text3);font-weight:400;
}

/* Stat cards */
.mkt-cards{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));
  gap:12px;margin-top:6px;
}
.mkt-card{
  background:var(--surface2);border:1px solid var(--border);
  border-radius:var(--radius-sm);padding:14px 16px;
}
.mkt-card-val{
  font-family:'Playfair Display',serif;font-size:24px;font-weight:700;
  color:var(--text);letter-spacing:-.5px;line-height:1.1;
}
.mkt-card-lbl{
  font-size:11px;font-weight:700;letter-spacing:.5px;text-transform:uppercase;
  color:var(--text3);margin-top:6px;
}
.mkt-card-sub{
  font-size:11.5px;color:var(--text2);margin-top:3px;
}

/* Report tables */
.mkt-table{font-size:13px;width:100%}
.mkt-table thead th{
  background:var(--surface2);color:var(--text2);
  font-size:10px;font-weight:700;letter-spacing:.6px;text-transform:uppercase;
  padding:9px 12px;text-align:left;white-space:nowrap;
}
.mkt-table td{padding:9px 12px;color:var(--text2);white-space:nowrap}
.mkt-table tbody tr + tr td{border-top:1px solid var(--border)}
.mkt-table tbody tr:hover td{background:rgba(79,70,229,.03)}
.mkt-table td.mkt-strong{color:var(--text);font-weight:600;white-space:normal}
.mkt-table td:nth-child(4){color:var(--text);font-weight:600}

.mkt-note{font-size:12px;color:var(--text3);line-height:1.6;margin:12px 0 0}
.mkt-note a{color:var(--primary);font-weight:600}
.mkt-related p{font-size:13px;color:var(--text2);line-height:1.9;margin:4px 0 0}
.mkt-related a{color:var(--primary);font-weight:600}
.mkt-method p{font-size:12.5px;color:var(--text3);line-height:1.7;margin:6px 0 0}
.mkt-method a{color:var(--primary)}

/* Monthly trend bars */
.mkt-trend{margin-top:8px;display:flex;flex-direction:column;gap:6px}
.mkt-trow{display:flex;align-items:center;gap:10px}
.mkt-tmon{width:34px;font-size:11px;font-weight:600;color:var(--text2);flex-shrink:0}
.mkt-tbar{
  height:14px;background:linear-gradient(90deg,var(--primary),#818cf8);
  border-radius:3px;min-width:2px;
}
.mkt-tval{font-size:11.5px;color:var(--text3);white-space:nowrap}

/* Market index — report cards */
.mkt-group{margin-top:26px}
.mkt-report-grid{
  display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));
  gap:14px;margin-top:12px;
}
.mkt-report-card{
  display:block;text-decoration:none;
  background:var(--surface);border:1px solid var(--border);
  border-radius:var(--radius);padding:16px 18px;
  transition:transform .15s, box-shadow .2s, border-color .15s;
}
.mkt-report-card:hover{
  transform:translateY(-2px);border-color:var(--primary);
  box-shadow:0 6px 20px rgba(0,0,0,.06);
}
.mkt-rc-title{
  font-family:'Playfair Display',serif;font-size:16px;font-weight:700;
  color:var(--text);line-height:1.3;margin-bottom:6px;
}
.mkt-rc-blurb{font-size:12.5px;color:var(--text2);line-height:1.6}
.mkt-rc-more{font-size:12px;color:var(--primary);font-weight:600;margin-top:10px}

@media(max-width:640px){
  .mkt-answer{padding:14px 16px}
  .mkt-answer p{font-size:14px}
  .mkt-card-val{font-size:21px}
  .mkt-table{font-size:12px;min-width:520px}
  .mkt-report-grid{grid-template-columns:1fr}
}