/*
  component-bottom.css
  Depends on: css/tokens.css
*/

.bottom {
  display: flex;
  align-items: center;
  gap: var(--space-2); /* 8px */
  position: relative;
  width: 100%;

  font-family: var(--font-mono);
  font-weight: var(--font-weight-regular);
  font-size: var(--typography-mono);
  line-height: var(--line-height-normal);
  letter-spacing: var(--letter-spacing-mono);
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--color-neutral-fg-muted);
}

.bottom__contact {
  flex: 0 0 auto;
  color: var(--color-neutral-fg-muted);
  position: relative;
}

.bottom__contact[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-neutral-fg);
  background: var(--color-neutral-opacity-strong);
  border: 1px solid var(--color-neutral-stroke-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.bottom__contact[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bottom__contact[data-tooltip]::after {
    transition: none;
  }
}

.bottom__time {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  pointer-events: auto;
}

.bottom__time[data-tooltip]::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + var(--space-2));
  left: 50%;
  transform: translateX(-50%) translateY(2px);
  font-family: var(--font-mono);
  font-size: 10px;
  line-height: 1;
  white-space: nowrap;
  color: var(--color-neutral-fg);
  background: var(--color-neutral-opacity-strong);
  border: 1px solid var(--color-neutral-stroke-subtle);
  border-radius: var(--radius-md);
  padding: var(--space-1) var(--space-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.15s ease, transform 0.15s ease;
}

.bottom__time[data-tooltip]:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

@media (prefers-reduced-motion: reduce) {
  .bottom__time[data-tooltip]::after {
    transition: none;
  }
}

/* Retro step-blink on the colon separators — classic digital-clock feel */
@keyframes bottom-clock-blink {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0; }
}

.bottom__time-sep {
  animation: bottom-clock-blink 1s step-end infinite;
}

@media (prefers-reduced-motion: reduce) {
  .bottom__time-sep {
    animation: none;
    opacity: 1;
  }
}

.bottom__mode {
  flex: 1 0 0;
  min-width: 0;
  display: inline-flex;
  justify-content: flex-end;
  gap: var(--space-2); /* 8px */
}

.bottom__mode .button {
  /* Button component defaults to neutral fg; Bottom uses muted fg */
  color: var(--color-neutral-fg-muted);
}

/* Figma Footer Mode Toggle (368:13139): inactive control opacity-80 */
.bottom__mode .button[aria-pressed="false"] {
  opacity: 0.8;
}

.bottom__mode .button[aria-pressed="true"] {
  opacity: 1;
}