/**
 * BH.Clock CSS — positions the clock canvas in the header.
 * Import via: <link rel="stylesheet" href="/components/clock.css" />
 *
 * Integration: <canvas id="topbar-clock" class="bh-clock" aria-label="Đồng hồ"></canvas>
 * The BH.Clock class replaces the existing #topbar-clock text element.
 */

/* ── Clock container in header ────────────────────────────────────────────── */
.bh-clock {
  display: inline-flex;
  align-items: center;
  border: none;
  background: transparent;
  padding: 0;
  cursor: default;
  vertical-align: middle;
}

/* Ensure clock canvas is crisp */
.bh-clock canvas {
  display: block;
  image-rendering: crisp-edges;
}

/* Hide clock from tablet down — header density (đồng bộ shell 900/760) */
@media (max-width: 900px) {
  .bh-clock {
    display: none !important;
  }
}

/* ── Mode badge (optional: shown next to clock) ───────────────────────────── */
.bh-clock__mode {
  display: inline-flex;
  align-items: center;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--text-tertiary, #78766f);
  background: var(--surface-2, #222220);
  border: 1px solid var(--border-dim, rgba(255, 255, 255, 0.045));
  margin-left: 4px;
  vertical-align: middle;
  cursor: pointer;
  transition: color var(--dur-micro, 110ms);
  font-family: var(--font-sans, system-ui, sans-serif);
  line-height: 1.4;
}

.bh-clock__mode:hover {
  color: var(--text-secondary, #a8a59c);
}

.bh-clock__mode:focus-visible {
  outline: 2px solid var(--accent, #d97757);
  outline-offset: 2px;
}