/* BR Times — Topbar (faixa de data, clima e cotações) (portado 1:1 do bundle BR Times Design System) */

/* ── Top info strip (date · weather · quotes) ─────── */
.brt-topbar {
  height: 36px;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  color: var(--fg-muted);
  font: 400 12px/1 var(--font-sans);
  /* Sticky: a faixa de data/clima/cotações fica fixa no topo (a navbar gruda
     logo abaixo em top:36px). z-index acima da navbar (10). */
  position: sticky;
  top: 0;
  z-index: 11;
  transition: background .4s ease, border-color .4s ease, color .4s ease;
}
.brt-topbar__inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}
.brt-topbar__left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.brt-topbar__date {
  color: var(--fg);
  font-weight: 500;
  letter-spacing: 0.01em;
}
.brt-topbar__sep { opacity: 0.5; }
.brt-topbar__weather {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--fg-muted);
}
.brt-topbar__weather svg { color: var(--accent); }
.brt-topbar__city { color: var(--fg-muted); }
.brt-topbar__temp {
  color: var(--fg);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

.brt-topbar__quotes {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  align-items: center;
  gap: 20px;
  flex-shrink: 0;
}
.brt-topbar__quote {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
}
.brt-topbar__quote-label {
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fg);
  font-size: 10.5px;
}
.brt-topbar__quote-value {
  color: var(--fg);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
}
.brt-topbar__quote-delta {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  font-size: 10.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}
.brt-topbar__quote-delta--up   { color: oklch(52% 0.13 145); }
.brt-topbar__quote-delta--down { color: oklch(55% 0.18 25); }
html.dark .brt-topbar__quote-delta--up   { color: oklch(72% 0.16 145); }
html.dark .brt-topbar__quote-delta--down { color: oklch(70% 0.18 25); }

/* By default show the full label/value; the --mini variants are mobile-only. */
.brt-topbar__quote-label--mini,
.brt-topbar__quote-value--mini { display: none; }

@media (max-width: 900px) {
  .brt-topbar__quotes { gap: 14px; }
  .brt-topbar__quote-delta { display: none; }
}
@media (max-width: 720px) {
  /* Mobile: keep the strip visible but strip it down to the essentials.
   * Hide date + city, swap currency 3-letter labels for compact glyphs
   * ($ € ₿) and shorten values so the row fits a ~327px viewport without
   * wrapping. Smaller height + font keeps it subtle. */
  .brt-topbar { height: 30px; font-size: 11px; }
  .brt-topbar__inner { gap: 12px; }
  .brt-topbar__left { gap: 8px; }
  .brt-topbar__date,
  .brt-topbar__sep,
  .brt-topbar__city { display: none; }
  .brt-topbar__weather { gap: 5px; }
  .brt-topbar__quotes { gap: 10px; }
  .brt-topbar__quote { gap: 4px; }
  .brt-topbar__quote-label--full,
  .brt-topbar__quote-value--full { display: none; }
  .brt-topbar__quote-label--mini,
  .brt-topbar__quote-value--mini { display: inline; }
  .brt-topbar__quote-label {
    font-size: 12px;
    font-weight: 600;
    letter-spacing: 0;
    color: var(--fg-muted);
  }
  .brt-topbar__quote-value { font-size: 11px; font-weight: 500; }
}