:root{
  --bg:#0f1115; --panel:#0a1118; --panel-2:#090f16; --text:#e6e9ef; --muted:#a0a7b4;
  --accent:#a78bfa; --good:#38d39f; --bad:#ff6b6b; --border:rgba(255,255,255,.07);
  --masthead-photo-h: 125px; --meta-nudge-y: -10px; --titles-nudge-y: 6px;
  --hero-max-w: 320px; --hero-vw: 31vw; --hero-gap-bottom: 12px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{
  margin:0;
  font:14px/1.5 ui-sans-serif,system-ui,-apple-system,Segoe UI,Roboto,Inter,Arial;
  color:var(--text);
  background:#06080d;
  -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale;
}

.wrap{max-width:1280px;margin:24px auto 48px;padding:0 16px}

/* Hero / brand image */
.hero{display:flex;justify-content:center;align-items:center;margin:0 auto var(--hero-gap-bottom);padding:0 8px}
.hero img{width:min(var(--hero-max-w), var(--hero-vw));height:auto;display:block}

/* Masthead */
header{display:flex;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:8px;color:var(--muted)}
header h1{font-size:21px;font-weight:700;margin:0;color:var(--text)}
header .titles{
  display:flex;
  flex-direction:column;
  gap:2px;
  align-self:start;
  transform: translateY(var(--titles-nudge-y));
  will-change: transform;
}
header .subtitle{
  font-size:18px;
  line-height:1.25;
  margin:0;
  color:var(--text);
  font-weight:600;
}

header.masthead{
  display:grid;
  grid-template-columns:auto 1fr auto;
  grid-template-rows:auto 1fr;
  column-gap:1px;
  row-gap:4px;
  align-items:stretch;
}
.masthead-photo{
  grid-row:1 / span 2;
  width:125px;
  margin-left:-1px;
  border-radius:12px;
  overflow:hidden;
  border:1px solid var(--border);
  background:#0c0f16;
}
.masthead-photo img{ width:100%; height:auto; display:block }

/* Shared meta row (Fed & default) */
.meta{
  display:flex;
  flex-wrap:wrap;
  column-gap:16px;   /* horizontal spacing between tags */
  row-gap:2px;       /* small vertical gap when it wraps */
  align-items:center;
  align-self:end;
  margin:0;
  line-height:1.2;   /* slightly tighter */
  color:var(--muted);
  transform: translateY(var(--meta-nudge-y));
}

/* ECB-specific: two stacked lines, pulled tight together */
.meta-ecb{
  flex-direction:column;   /* stack the two .meta-line blocks */
  align-items:flex-start;
  Column-gap:16px;
  Row-gap:0;               /* no extra gap between the two lines */
}

.meta-ecb .meta-line{
  display:flex;
  flex-wrap:wrap;
  column-gap:16px;         /* horizontal spacing between items on each line */
  Row-gap:0;               /* keep wrapped items close vertically */
  line-height:1.05;        /* very tight line height within each line */
}

/* Pull the "Source" line closer to the line above */
.meta-ecb .meta-line + .meta-line{
  margin-top:-2px;         /* negative margin to visually remove the gap */
}

.tag{display:inline-flex;gap:8px;align-items:center}
.dot{width:6px;height:6px;border-radius:999px;background:var(--accent)}
.spacer{flex:1}
button.refresh{
  appearance:none;
  border:0;
  cursor:pointer;
  padding:10px 16px;
  border-radius:12px;
  background:linear-gradient(180deg,#7c5cff,#8d6bff);
  color:white;
  font-weight:600;
  box-shadow:0 8px 20px rgba(124,92,255,.25);
}

/* Layout grid + cards */
.grid{
  display:grid;
  grid-template-columns:60% 40%;
  gap:16px;
  align-items:stretch;
}
.card{
  background:linear-gradient(180deg,rgba(255,255,255,.012),transparent),var(--panel);
  border:1px solid var(--border);
  border-radius:16px;
  padding:16px;
  height:100%;
  display:flex;
  flex-direction:column;
  min-height:480px;
}
.card h2{
  font-size:14px;
  font-weight:800;
  letter-spacing:.02em;
  margin:0 0 12px;
  color:var(--text);
}

/* Table */
table{width:100%;border-collapse:separate;border-spacing:0}
thead th{
  text-align:left;
  font-size:12px;
  color:var(--muted);
  font-weight:700;
  padding:10px 10px;
  border-bottom:1px solid var(--border);
  position:sticky;
  top:0;
  background:var(--panel);
  vertical-align:bottom;
}
.stack{display:inline-flex;flex-direction:column;line-height:1.1}
th.right .stack{align-items:flex-end}
.stack span{font-weight:600;opacity:.9}
tbody td{
  padding:10px;
  border-bottom:1px dashed var(--border)
}
tbody tr:last-child td{border-bottom:0}
.right{text-align:right}
.mono{
  font-variant-numeric:tabular-nums;
  font-family: ui-monospace,SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;
}
.neg{color:var(--bad)}
.pos{color:var(--good)}
.hint{color:var(--muted);font-size:12px;margin-top:10px}
.meeting{white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:170px}

/* Chart */
.chart-wrap{position:relative;flex:1;min-height:360px}
canvas{position:absolute;inset:0}
.src{color:var(--muted);font-size:12px}

/* Responsive */
@media (max-width: 960px){
  .grid{grid-template-columns:1fr}
  .meeting{min-width:140px}
}

/* Controls */
select.step-select{
  appearance:auto;
  background:var(--panel-2);
  color:var(--text);
  border:1px solid var(--border);
  border-radius:8px;
  padding:4px 8px;
  font:inherit;
}

/* Central bank nav tabs */
.cb-nav{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin:0 0 16px;
}

.cb-tab{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  padding:4px 11px;
  border-radius:999px;
  border:1px solid transparent;
  font-size:11px;
  text-transform:uppercase;
  letter-spacing:.12em;
  text-decoration:none;
  color:var(--muted);
  background:rgba(15,23,42,.9);
}

.cb-tab:hover{
  border-color:var(--border);
  color:var(--text);
}

.cb-tab-active{
  color:var(--text);
  border-color:rgba(148,163,184,.9);
  box-shadow:0 0 0 1px rgba(148,163,184,.65);
  background:linear-gradient(180deg,rgba(148,163,184,.18),rgba(15,23,42,.95));
}

/* Ad slots (rails + banner) */
.page-frame .ad-slot{
  background:var(--panel-2);
  border-radius:12px;
  border:1px solid var(--border);
}

.ad-slot-rail,
.ad-slot-banner{
  display:flex;
  align-items:center;
  justify-content:center;
}

/* Keep blank AdSense slots dark when no creative is served */
.ad-slot-rail .adsbygoogle,
.ad-slot-banner .adsbygoogle{
  background:transparent;
}

.ad-slot-rail iframe,
.ad-slot-banner iframe{
  background:var(--panel-2);
}

/* Site footer */
.site-footer {
  max-width: 1040px;
  margin: 24px auto 40px;
  padding: 0 16px;
  font-size: 12px;
  color: var(--muted);
}

.site-footer .footer-links {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.site-footer a {
  color: inherit;
  text-decoration: none;
}

.site-footer a:hover {
  text-decoration: underline;
}