/* The header time control — one implementation, used by Portfolio, Macro and
   Valuation.
 *
 * It was three: Macro and Valuation shared a `.macro-time-badge` in macro.css,
 * while Portfolio built its own out of `.live-badge` — the same class as the
 * market-status pill — and then layered a gold border and a glow animation on
 * top, so the same control read as "● LIVE 10:07 ▾" on one page and "10:08 ▾"
 * on the other two. Portfolio's mobile rules had already been normalised to
 * match Macro; only the desktop styling had drifted.
 *
 * Everything the control needs lives here, so a change to it changes all three
 * pages at once and none of them can drift again. The markup is identical on
 * every page; only the element ids differ, which is what each page's script
 * binds to.
 */

.header-clock { position: relative; }

/* Deliberately the quiet variant of the header's pill: the neutral border and
   background of a status chip, not the gold call-to-action of the Markets
   dropdown. Whether the market is open is the market-status pill's job. */
.header-clock-badge {
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 0 11px;
  border: 1px solid var(--border2);
  border-radius: 999px;
  background: rgba(128, 128, 128, .05);
  color: var(--text2);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .03em;
  white-space: nowrap;
  cursor: pointer;
}

.header-clock-chevron { display: inline-block; font-size: 11px; transition: transform .2s; }
.header-clock.open .header-clock-chevron { transform: rotate(180deg); }

.header-clock-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 205;
  width: max-content;
  min-width: 156px;
  overflow: hidden;
  border: 1px solid var(--border2);
  border-radius: 12px;
  background: var(--paper);
  box-shadow: 0 18px 38px -18px var(--shadow);
}

/* The panel is shown by the `open` class each page's script already toggles on
   the wrapper, so no page needs styling of its own to make the menu work. */
.header-clock:not(.open) .header-clock-panel { display: none; }

.header-clock-row {
  display: grid;
  grid-template-columns: 72px 48px;
  justify-content: start;
  column-gap: 16px;
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
  font-family: 'IBM Plex Mono', monospace;
  font-size: 11px;
}

.header-clock-row:last-child { border-bottom: 0; }
.header-clock-row span { color: var(--text2); white-space: nowrap; }
.header-clock-row strong { color: var(--text); text-align: left; }

/* The same breakpoint the three headers already collapse at. */
@media(max-width: 700px) {
  .header-clock-badge { min-height: 34px; padding-inline: 6px; }
}