/* styles/macro.css — MACRO page widgets */

/* yields table */
.ytable { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 11px; }
.ytable th {
  text-align: right; font-weight: 500;
  font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--txt-3);
  padding: 4px 4px; border-bottom: 1px solid var(--hairline-2);
}
.ytable th:first-child { text-align: left; }
.ytable td { padding: 5.5px 4px; text-align: right; border-bottom: 1px solid rgba(255,255,255,0.04); }
.ytable td:first-child { text-align: left; color: var(--txt-1); font-weight: 600; letter-spacing: 0.04em; }
.ytable__c { display: flex; align-items: center; gap: 6px; }
.ytable__flag { font-size: 12px; line-height: 1; }
.ytable__hi { color: var(--gold-soft); font-weight: 600; }
.ytable tr:last-child td { border-bottom: 0; }

/* yield curve */
.ycurve { width: 100%; height: 100%; min-height: 100px; }

/* fx table */
.fxtable { font-family: var(--font-mono); font-size: 11px; }
.fxtable__row {
  display: grid;
  grid-template-columns: 80px 1fr 60px 1fr;
  gap: 10px;
  align-items: center;
  padding: 5.5px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.fxtable__row:last-child { border-bottom: 0; }
.fxtable__pair { color: var(--txt-1); font-weight: 700; letter-spacing: 0.04em; }
.fxtable__val { font-size: 12px; color: var(--gold-soft); font-weight: 600; text-align: right; }
.fxtable__chg { text-align: right; font-weight: 600; }
.fxtable__rng { font-size: 9.5px; text-align: right; }

/* commodities grid */
.comgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 6px; }
.comgrid__cell {
  background: rgba(15,13,9,0.96);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
  padding: 8px 10px;
  display: grid; gap: 3px;
  font-family: var(--font-mono);
  min-width: 0;
}
.comgrid__hd { display: flex; align-items: baseline; gap: 6px; }
.comgrid__sym { font-size: 11px; font-weight: 700; color: var(--gold-soft); letter-spacing: 0.04em; }
.comgrid__nm  { font-size: 9px; color: var(--txt-3); letter-spacing: 0.12em; text-transform: uppercase; }
.comgrid__val { font-size: 14px; font-weight: 600; color: var(--txt-1); }
.comgrid__u   { font-size: 9px; color: var(--txt-3); margin-left: 3px; font-weight: 400; }
.comgrid__chg { font-size: 10.5px; font-weight: 600; }

/* central bank rates */
.cbrates { font-family: var(--font-mono); font-size: 10.5px; }
.cbrates__row {
  display: grid;
  grid-template-columns: 48px 56px 1fr;
  grid-template-areas: 'cb rate last' 'cb rate next';
  gap: 2px 10px;
  padding: 6.5px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
  align-items: center;
}
.cbrates__row:last-child { border-bottom: 0; }
.cbrates__cb { grid-area: cb; font-size: 12px; font-weight: 700; color: var(--txt-1); letter-spacing: 0.04em; }
.cbrates__rate { grid-area: rate; font-size: 13px; color: var(--gold-soft); font-weight: 600; }
.cbrates__last { grid-area: last; color: var(--txt-3); font-size: 9.5px; }
.cbrates__next { grid-area: next; color: var(--gold); font-size: 9.5px; font-weight: 600; }

/* macro key indicators.
 * v56: dropped `height: 100%` (it caused cells to crush below content when
 * parent panel body is shorter than natural grid height — observed at
 * 1280×800, 1920×900 viewports where my height-specific responsive.css
 * overrides don't trigger). Use grid-auto-rows minmax to guarantee per-row
 * floor and let the grid take its natural height — panel__body--scroll
 * handles overflow when truly tight. At ≤800h responsive.css further
 * compresses to minmax(38px) @ ≤800 and minmax(33px) @ ≤730. */
.mkey {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  grid-auto-rows: minmax(70px, auto);
  gap: 6px;
}
.mkey__cell {
  background: rgba(15,13,9,0.96);
  border: 1px solid rgba(255,255,255,0.04);
  border-radius: 4px;
  padding: 9px 11px;
  display: flex; flex-direction: column; gap: 3px;
  min-width: 0; overflow: hidden;
}
.mkey__cell > .mkey__lbl { flex: 0 0 auto; min-height: 12px; }
.mkey__cell > .mkey__val { flex: 0 0 auto; }
.mkey__cell > .mkey__sub { flex: 1 1 auto; min-height: 12px; }
.mkey__lbl { font-family: var(--font-mono); font-size: 9px; color: var(--txt-3); letter-spacing: 0.18em; text-transform: uppercase; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mkey__val { font-size: 18px; font-weight: 600; color: var(--txt-1); line-height: 1.15; }
.mkey__sub { font-family: var(--font-mono); font-size: 9.5px; }

/* calendar */
.cal { font-family: var(--font-mono); font-size: 10.5px; }
.cal__row {
  display: grid;
  grid-template-columns: 84px 44px 1fr 60px 38px;
  gap: 10px;
  align-items: center;
  padding: 6px 12px;
  border-bottom: 1px solid rgba(255,255,255,0.04);
}
.cal__row:last-child { border-bottom: 0; }
.cal__d { color: var(--txt-3); font-size: 9.5px; letter-spacing: 0.1em; }
.cal__t { color: var(--gold-soft); }
.cal__ev { color: var(--txt-1); font-family: var(--font-sans); font-size: 11.5px; }
.cal__fc { color: var(--txt-1); text-align: right; font-weight: 600; }
.cal__imp { text-align: right; font-size: 9px; letter-spacing: 0.06em; }
.cal__imp.imp-1 { color: var(--txt-3); }
.cal__imp.imp-2 { color: var(--gold-soft); }
.cal__imp.imp-3 { color: var(--gold); }

@media (max-width: 1100px) {
  .comgrid { grid-template-columns: repeat(2, 1fr); }
  .mkey { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 899px) {
  .fxtable__rng { display: none; }
  .fxtable__row { grid-template-columns: 70px 1fr 60px; }
  .comgrid, .mkey { grid-template-columns: 1fr 1fr; }
  .ytable, .ytable th, .ytable td { font-size: 13px !important; line-height: 1.3 !important; }
  /* Caption ≥ 11px */
  .mkey__lbl, .mkey__sub, .cbrates__cb, .cbrates__last, .cbrates__next,
  .comgrid__nm, .comgrid__u, .ytable__flag,
  .cal__d, .cal__t, .cal__fc, .cal__imp
  { font-size: 11px !important; line-height: 1.25 !important; }
  /* Body ≥ 13px */
  .mkey__val, .cbrates__rate, .fxtable__pair, .fxtable__val, .fxtable__chg,
  .comgrid__sym, .comgrid__val, .comgrid__chg, .cal__ev
  { font-size: 13px !important; line-height: 1.3 !important; }
}