/* css/driver-badge.css — persistent driver portrait + name badge, shown on
 * every tab, docked at one of three positions along an invisible
 * horizontal rail across the top of the screen (see .driver-badge__handle
 * / js/driver-badge.js's cyclePosition()). */

.driver-badge {
  position: absolute;
  top: var(--space-md);
  z-index: 70;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: left var(--duration-tab) var(--ease-standard),
    right var(--duration-tab) var(--ease-standard),
    transform var(--duration-tab) var(--ease-standard);
}

.driver-badge[hidden] {
  display: none;
}

.driver-badge[data-position='left'] {
  left: var(--space-md);
  right: auto;
  transform: none;
}

.driver-badge[data-position='center'] {
  left: 50%;
  right: auto;
  transform: translateX(-50%);
}

.driver-badge[data-position='right'] {
  left: auto;
  /* Clear of the sleep/theme/driver-info button column, which occupies the
   * same top-right corner (css/layout.css's .sleep-btn and its two stacked
   * siblings) — sits immediately to its left instead of overlapping it. */
  right: calc(var(--space-md) + 3.25rem + var(--space-sm));
  transform: none;
}

.driver-badge__main {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  max-width: 12rem;
  padding: 0.4rem 0.9rem 0.4rem 0.4rem;
  border-radius: var(--radius-pill);
  background: var(--color-surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-hairline-faint);
  box-shadow: var(--shadow-tight);
}

.driver-badge__portrait-frame {
  flex: none;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle, var(--color-accent-faint), var(--color-surface-raised));
}

.driver-badge__portrait {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.driver-badge__name {
  min-width: 0;
  font-size: var(--text-caption);
  color: var(--color-text-primary);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.driver-badge__handle {
  flex: none;
  width: 1.75rem;
  height: 1.75rem;
  display: grid;
  place-items: center;
  border-radius: 50%;
  color: var(--color-text-secondary);
  background: var(--color-surface);
  backdrop-filter: blur(var(--glass-blur));
  -webkit-backdrop-filter: blur(var(--glass-blur));
  border: 1px solid var(--color-hairline-faint);
  box-shadow: var(--shadow-tight);
}

/* icon('chevron') points right by default — rotated to read as a small
 * "move" grip rather than a directional arrow. */
.driver-badge__handle svg {
  width: 0.8rem;
  height: 0.8rem;
  transform: rotate(90deg);
}