:root {
  color-scheme: light dark;
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #1a1d23;
  --muted: #6b7280;
  --border: #e3e5e9;
  --accent: #2563eb;
  --up: #16a34a;
  --down: #dc2626;
  --flat: #6b7280;
  /* Pre-composited row-hover color (surface + the tr:hover overlay below),
     since the sticky first column needs an opaque background of its own. */
  --row-hover-solid: #f2f3f5;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14161a;
    --surface: #1d2025;
    --text: #e8eaed;
    --muted: #9aa0a8;
    --border: #2c2f36;
    --accent: #5b9bff;
    --up: #34d399;
    --down: #f87171;
    --flat: #9aa0a8;
    --row-hover-solid: #23262a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}

.topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid var(--border);
}

.topbar h1 { font-size: 1.25rem; margin: 0; }

.topbar-meta {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 0.85rem;
  color: var(--muted);
}

#refresh-btn {
  background: none;
  border: 1px solid var(--border);
  border-radius: 6px;
  color: var(--text);
  cursor: pointer;
  font-size: 1rem;
  padding: 0.25rem 0.6rem;
}
#refresh-btn:hover { background: var(--surface); }

.region-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding: 1rem 1.5rem 0;
}

.tab {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 999px;
  color: var(--muted);
  cursor: pointer;
  font-size: 0.85rem;
  padding: 0.4rem 0.9rem;
}
.tab.active {
  background: var(--accent);
  border-color: var(--accent);
  color: white;
}

main { padding: 1rem 1.5rem 2rem; }

/* This, not the table itself, is what scrolls horizontally — and it's the
   nearest non-visible-overflow ancestor, i.e. what position: sticky on the
   first column measures against. If overflow/clipping lived on <table>
   instead, the table (which never itself overflows) becomes that reference
   ancestor and sticky silently stops working. */
.table-scroll {
  overflow-x: auto;
  overflow-y: hidden;
  border: 1px solid var(--border);
  border-radius: 10px;
}

.rates-table {
  width: 100%;
  /* border-collapse: collapse also breaks position: sticky on table cells
     in most browsers — separate + zero spacing looks identical here since
     we only use border-bottom (no vertical cell borders). */
  border-collapse: separate;
  border-spacing: 0;
  background: var(--surface);
  min-width: 720px;
}

.rates-table th {
  text-align: left;
  font-size: 0.75rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  color: var(--muted);
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  white-space: nowrap;
}

/* Frozen first column (Country) — stays put while the rest of the table
   scrolls sideways. Needs an explicit opaque background since sticky cells
   sit on top of whatever scrolls underneath them. */
.rates-table th:first-child,
.rates-table td:first-child {
  position: sticky;
  left: 0;
  z-index: 1;
  background: var(--surface);
  min-width: 150px;
  box-shadow: 2px 0 4px -2px rgba(0, 0, 0, 0.15);
}
.rates-table th:first-child { z-index: 2; }
.rates-table tbody tr:hover td:first-child { background: var(--row-hover-solid); }

.rates-table th[title] { cursor: help; }

.th-sub {
  display: block;
  font-size: 0.65rem;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 400;
  opacity: 0.8;
}

.rates-table td {
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--border);
  font-size: 0.9rem;
}

.rates-table tr:last-child td { border-bottom: none; }
.rates-table tbody tr:hover { background: rgba(128,128,128,0.06); }

.country-cell { display: flex; align-items: center; gap: 0.5rem; }
.flag { font-size: 1.1rem; }
.country-name { font-weight: 600; }
.bank-name { color: var(--muted); font-size: 0.85rem; }

.rate-value { font-variant-numeric: tabular-nums; font-weight: 600; }
.rate-value.muted { color: var(--muted); font-weight: 500; }

.change { font-variant-numeric: tabular-nums; font-weight: 600; }
.change.up { color: var(--up); }
.change.down { color: var(--down); }
.change.flat { color: var(--flat); }

.countdown { font-variant-numeric: tabular-nums; }
.countdown.imminent { color: var(--down); font-weight: 600; }

.streak {
  font-size: 0.72rem;
  color: var(--muted);
  margin-top: 0.15rem;
}

.days-since {
  font-size: 0.75rem;
  color: var(--muted);
  margin-top: 0.1rem;
}

.sparkline { width: 90px; height: 28px; color: var(--muted); display: block; }
.sparkline-empty { color: var(--muted); font-size: 0.8rem; }

.source-tag {
  font-size: 0.7rem;
  text-transform: uppercase;
  color: var(--muted);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 0.1rem 0.4rem;
}

.empty-state { text-align: center; color: var(--muted); padding: 2rem !important; }

footer {
  padding: 1rem 1.5rem 2rem;
  color: var(--muted);
  font-size: 0.75rem;
  max-width: 60ch;
}

/* ---------- Responsive ---------- */

/* Large desktop: keep line lengths sane instead of stretching edge to edge. */
@media (min-width: 1440px) {
  .topbar, .region-tabs, main, footer {
    max-width: 1400px;
    margin-left: auto;
    margin-right: auto;
  }
}

/* Tablet */
@media (max-width: 900px) {
  .topbar { padding: 1rem; }
  .region-tabs { padding: 0.85rem 1rem 0; }
  main { padding: 0.85rem 1rem 1.5rem; }
  footer { padding: 0.85rem 1rem 1.5rem; }
}

/* Mobile */
@media (max-width: 640px) {
  .topbar {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.6rem;
    padding: 0.85rem 1rem;
  }
  .topbar h1 { font-size: 1.1rem; }
  .topbar-meta { width: 100%; justify-content: space-between; }

  .region-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    padding: 0.75rem 1rem 0;
    -webkit-overflow-scrolling: touch;
  }
  .tab {
    flex-shrink: 0;
    font-size: 0.78rem;
    padding: 0.35rem 0.75rem;
  }

  main { padding: 0.75rem 0.75rem 1.25rem; }

  .rates-table th,
  .rates-table td { padding: 0.6rem 0.75rem; font-size: 0.82rem; }
  .rates-table th { font-size: 0.68rem; }

  .rates-table th:first-child,
  .rates-table td:first-child { min-width: 120px; }

  .flag { font-size: 1rem; }
  .sparkline { width: 64px; height: 24px; }
  .source-tag { font-size: 0.65rem; }
}

/* ---------- Fed Rate Expectations card ---------- */

.fed-card {
  margin: 1rem 1.5rem 0;
  padding: 1.1rem 1.4rem 1.3rem;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 10px;
}

.fed-card-head {
  display: flex;
  align-items: center;
  gap: 0.7rem;
}
.fed-card-head h2 { margin: 0; font-size: 1rem; }

.fed-stale-badge {
  font-size: 0.72rem;
  color: var(--down);
  border: 1px solid var(--down);
  border-radius: 999px;
  padding: 0.1rem 0.55rem;
}

.fed-card-sub {
  margin: 0.25rem 0 0.3rem;
  font-size: 0.78rem;
  color: var(--muted);
}

.fed-freshness {
  margin: 0 0 1rem;
  font-size: 0.76rem;
  color: var(--muted);
}

.fed-stats {
  display: flex;
  flex-wrap: wrap;
  gap: 1.6rem;
  margin-bottom: 1.1rem;
}
.fed-stat { display: flex; flex-direction: column; gap: 0.15rem; }
.fed-label {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--muted);
}
.fed-value { font-size: 1.15rem; font-weight: 600; }

.fed-bar-section { margin-bottom: 0.8rem; }
.fed-bar {
  display: flex;
  height: 10px;
  border-radius: 999px;
  overflow: hidden;
  margin: 0.4rem 0 0.5rem;
  background: var(--border);
}
.fed-bar-seg.hold { background: var(--flat); }
.fed-bar-seg.cut { background: var(--down); }
.fed-bar-seg.hike { background: var(--up); }

.fed-bar-legend {
  display: flex;
  gap: 1.2rem;
  font-size: 0.8rem;
  flex-wrap: wrap;
}
.fed-bar-legend span { display: inline-flex; align-items: center; gap: 0.35rem; }
.fed-bar-legend .dot { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.fed-bar-legend .dot.hold { background: var(--flat); }
.fed-bar-legend .dot.cut { background: var(--down); }
.fed-bar-legend .dot.hike { background: var(--up); }

.fed-change {
  font-size: 0.82rem;
  color: var(--muted);
  margin: 0;
}
.fed-change .up { color: var(--up); font-weight: 600; }
.fed-change .down { color: var(--down); font-weight: 600; }

@media (max-width: 640px) {
  .fed-card { margin: 0.75rem 0.75rem 0; padding: 1rem; }
  .fed-stats { gap: 1rem; }
}