[data-focusable] {
  transition:
    border-color var(--dur-focus) var(--ease-focus),

    transform var(--dur-focus) var(--ease-focus),
    background var(--dur-focus) var(--ease-focus);
  outline: none;
  cursor: pointer;
}

[data-focusable].focused {
  /* A borda de 2px ja reservada vira a primeira camada do vao, nao um anel
     concorrente. O anel inteiro mora no box-shadow. */
  border-color: var(--focus-gap) !important;
  box-shadow: var(--focus-shadow);
  transform: scale(var(--focus-scale));
  z-index: 10;
}

.group-item.focused,
.channel-item.focused {
  background: var(--bg-tertiary) !important;
  border-color: var(--focus-ring) !important;
}

.btn.focused {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: white;
  transform: scale(var(--focus-scale));
}

/* Must come after .btn.focused (equal specificity, later wins) or a focused
   Remover would take the primary button's fill and stop reading as destructive. */
.btn-danger.focused,
.btn-danger:hover {
  background: rgba(255, 85, 96, 0.18);
  color: var(--danger);
}

.settings-input.focused {
  /* Was var(--accent): the one focusable in the app that ringed red instead of
     following --focus-ring, on the screen where typing accuracy matters most. */
  border-color: var(--focus-ring) !important;
  background: var(--bg-primary);
}

.epg-programme.focused {
  background: var(--accent-dim) !important;
  border-color: var(--focus-ring) !important;
  z-index: 10;
}